flutter - 将动态数据从 Scaffold 主体传递到 Flutter 中的 Navigation Drawer(使用 Drawer 作为侧页)

Question

我正在开发一个支持多个计数器的计数器应用程序。由于 flutter 不提供侧板模式，我使用抽屉导航作为侧板。

我有一个脚手架，它的主体中有一个卡片的 GridView。这些卡每个都有一个名称和一个计数器值。每当点击其中一张卡片时，抽屉导航就会打开，它应该显示人名和计数值。在此抽屉中，还有一个按钮，用于增加与单击的卡片对应的计数器值。但是，问题是，如何将数据从 Scaffold 主体传递到 Drawer？我可以使用 Scaffold.of(context).openEndDrawer(); 以编程方式打开抽屉但这不允许我将数据传递给它。

我也可以使用下面的代码，它确实允许我传递数据，但是抽屉像页面一样打开并且覆盖全屏。

Navigator.push(
  context, 
  MaterialPageRoute(
    builder: (context) => TurfDrawer(name: name, count: count)
  ));

所以基本上，我只想知道点击了哪张卡片并将其传递给抽屉。非常感谢所有帮助。

脚手架看起来像这样:

  @override
  Widget build(BuildContext context) {
    return Scaffold(

      // App bar
      appBar: AppBar(
        title: Text('Turflijst'),
        elevation: 0.0, 
        automaticallyImplyLeading: false,
        actions: <Widget>[
          IconButton(icon: Icon(Icons.settings), onPressed: null)
        ],
      ),

      // Drawer
      endDrawer: TurfDrawer(),

      // Body
      body: Builder(
        builder: (BuildContext context) {
          return Stack(
            alignment: AlignmentDirectional.topCenter,
            children: <Widget> [
              Container(
                color: primaryColor,
                height: (kEffectHeight - offset * 2.5).clamp(0.0, kEffectHeight),
              ),
              Positioned(
                child: Container(
                  margin: EdgeInsets.only(top: 70),
                  width: 1200.0,
                  child: GridView.count(
                    controller: scrollController,
                    crossAxisCount: 4,
                    crossAxisSpacing: 10,
                    mainAxisSpacing: 10,
                    childAspectRatio: 2,
                    children: <Widget>[
                      for (MapEntry entry in list.asMap().entries) 
                        TurfCard(index: entry.key, name: entry.value, count: count[entry.key])
                    ]

这是卡片:

class TurfCard extends StatefulWidget {

  final int index, count;
  final String name;
  TurfCard({
    Key key, 
    @required this.index, 
    @required this.name, 
    @required this.count
  }) : super(key: key);

  @override
  _TurfCardState createState() => _TurfCardState();
}

class _TurfCardState extends State<TurfCard> {

  @override
  Widget build (BuildContext context) {
    return GridTile(
      child: Card(
        elevation: 1.5,
        color: Colors.white,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)),
        child: InkWell(
          splashColor: primaryColor.withAlpha(100),
          onTap: () {
            Scaffold.of(context).openEndDrawer();
            // Navigator.push(
            //   context, 
            //   MaterialPageRoute(
            //     builder: (context) => TurfDrawer()
            //   ));
            print('Card $widget.index tapped.');
          },

Answer 1

这是一种解决方案:

您将选定的索引保存为 ScaffoldWidget 类中的一个字段(无论您如何称呼它):

class TurfCard extends StatefulWidget {
  final void Function() onTap;
//...other properties
}
class _TurfCardState extends State<TurfCard> {
  @override
  Widget build(BuildContext context) {
    return SomeWidgets(
      child: InkWell(
        //...
        onTap: widget.onTap,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  int selectedIndex; //you can also save the index here and update it in onTap()
  @override
  Widget build(BuildContext context) {
    return Widget build(BuildContext context){
      return Scaffold(
        //...
          body: SomeWidgets(
            //...
          for(MapEntry entry in list.asMap().entries)
          TurfCard(
          //some properties....
          onTap:(){
               selectedIndex = entry.key;
               Scaffold.of(context).openEndDrawer();
              print('Card ${entry.key tapped.');
               }
           )
        ),
      ),
    };
  }
}