Question

我试图通过在该孩子的父级的父级中单击一个按钮，在StateFul小部件下的两层内运行一个带有自变量的函数（带有自变量）（ 构建完所有小部件之后，而不是在构造函数内部）。如下图所示：

更多细节是我创建了一个内部有卡片published here的Carousal。

我在创建时就考虑到了StreamBuilder（这是迄今为止我唯一使用过的用例场景），因此，一旦流发送更新，构建器将重新创建整个Carousal，因此我可以传递SELECTED_CARD_ID对此。

但是现在我需要以编程方式触发选择旋转木马的卡片，或者换句话说，不需要基于快照数据的两种构造：

return StreamBuilder(
      stream: userProfileBloc.userFaviourateStream,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return SelectableCarousal(
            selectedId: snapshot.data.toInt(),
            onTap: //Update the stream
            //some props...,
          );
        } else {
          return SelectableCarousalLoading(
            selectedId: null,
            onTap: //Update the stream
            //some props...,
          );
        }
      },
    );

但是，我正尝试拥有这样的东西，以便可以将其用于其他用例：

Widget myCarousal =  SelectableCarousal(
    selectedId: null,
    onTap: //Update the stream
    //some props...,
);
return StreamBuilder(
      stream: userProfileBloc.userFaviourateStream,
      builder: (context, snapshot) {

        // Then when data ready I can update 
        // the selection by calling two-level down function
        if (snapshot.hasData) {
          myCarousal.selectById(3);
        }

        // Build same carousal in all cases.
        return myCarousal;
      },
    );

因此，这引出了我最初的问题“ 如何在StateFul小部件的两层内部运行函数（带有自变量）？”。

感谢您的帮助。非常感谢。

Answer 1

我能够使用 BLoC＆Stream＆StreamSubscription 解决该挑战，请参见下图：

在“首页”屏幕内：

///...Inside Homepage screen level-0
RaisedButton(
    child: Text('Update value in the BLoC'),
    onPressed: () {
         bloc.changeSelectedState(isSel);
    },
),
//...

在BLoC内部：

class Bloc {
  final BehaviorSubject<bool> _isSelectedStreamController = BehaviorSubject<bool>();

  // Retrieve data from stream
  Stream<bool> get isSelectedStream => _isSelectedStreamController.stream;

  // Add data to stream
  Function(bool) get changeSelectedState => _isSelectedStreamController.sink.add;

  void dispose() {
    _isSelectedStreamController.close();
  }
}
final bloc = Bloc();

在任何级别的任何小部件内，只要它可以到达整个集团：

// This inside the two-levels down stateful widget..
StreamSubscription isSelectedSubscription;
Stream isSelectedStream = bloc.isSelectedStream;
isSelectedSubscription = isSelectedStream.listen((value) {
      // Set flag then setState so can show the border.
      setState(() {
        isSelected = value;
      });
});

//...other code

@override
Widget build(BuildContext context) {

   return Container(
      decoration: isSelected
          ? BoxDecoration(
              color: Colors.deepOrangeAccent,
              border: Border.all(
                width: 2,
                color: Colors.amber,
              ),
            )
          : null,
          //...other code
    );
}

因此我的小部件的新设计将BLoC作为其主要部分，请参见图片：

和...具有灵活简洁的代码和体系结构的魅力，就像^^

如何通过父级小部件在子状态小部件内运行函数？

1 个答案: