为什么无状态小部件中的小吃店没有上下文问题,而无状态小部件中为什么有错误?

时间:2019-05-27 11:24:25

标签: flutter widget

嗨,我为您提供了2种扑朔迷离的示例代码: 这是一个无状态的小部件

class MyCustomButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ripple Effect Button',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Ripple'),
        ),
        body: Builder(
          builder: (context2) => Center(
                child: GestureDetector(
                  onTap: () {
                    final snackBar = SnackBar(
                      content: Text('Hai'),
                    );
                    Scaffold.of(context2).showSnackBar(snackBar);
                  },
                  child: Container(
                    padding: EdgeInsets.all(16.0),
                    decoration: BoxDecoration(
                      color: Theme.of(context2).buttonColor,
                      borderRadius: BorderRadius.circular(8.0),
                    ),
                    child: Text('Cick Me!'),
                  ),
                ),
              ),
        ),
      ),
    );
  }
}

和另一个本质上是有状态的

class CustomDismissList extends StatefulWidget {
  @override
  _CustomDismissListState createState() => _CustomDismissListState();
}

class _CustomDismissListState extends State<CustomDismissList> {
  final items = List<String>.generate(30, (i) => 'Item ${i + 1}');

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dismissable List Tiles',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dismissable List'),
        ),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            final item = items[index];
            return Dismissible(
              key: Key(item),
              onDismissed: (direction) {
                setState(() {
                  items.removeAt(index);
                });
                Scaffold.of(context).showSnackBar(
                  SnackBar(
                    content: Text('$item dimissed'),
                  ),
                );
              },
              direction: DismissDirection.endToStart,
              background: Container(
                color: Colors.red,
              ),
              child: ListTile(
                title: Text('${items[index]}'),
              ),
            );
          },
        ),
      ),
    );
  }
}

如您所见,这两个代码示例都非常简单。

  1. 第一个是无状态窗口小部件,单击按钮时显示小吃店。 但是,为了显示小吃店,我需要将该小部件嵌入另一个构建上下文(即Builder小部件)中。

  2. 在第二种情况下,这是一个有状态的小部件,它显示了Dismissible小部件的示例,该小部件一旦从列表中删除了一个项目,便显示一个小吃店。

我的问题是,除了一个无状态和有状态的小部件几乎代码是相同的事实之外。

有一个小吃店,所有代码都在MaterialApp小部件内的一个块中。

那么为什么在第一种情况下我需要使用Builder小部件来显示小吃店,而在第二种情况下我却不想使用小工具?

第二种情况也与小吃店一样吗?

还是与Dismissible小部件有关?

提前谢谢

0 个答案:

没有答案