flutter - 搜索一个小部件，它在普通屏幕上构建一个列表

Question

有人知道小部件是如何被调用的，它显示了一个列表，它在正常屏幕上吗？下面的链接显示了另一个应用程序的屏幕截图，看起来我想要它。我希望屏幕截图能清楚地说明我在寻找什么。提前致谢！

这是截图

标签： flutterlayoutflutter-layout

Answer 1

您可以使用显示对话框小部件进行构建。

以下代码可帮助您了解更多。

注意：我演示了使用新的有状态小部件，因为在您的屏幕截图中您想要选择单选按钮并且无法更改状态，因此需要有状态小部件。如果你不想改变蚂蚁状态意味着如果你不想调用 setState 那么你可以创建小部件，我称之为有状态小部件。

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  List list = List();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.red,
        child: Center(
          child: RaisedButton(
            child: Text("click!"),
            onPressed: () async {
              showDialog(
                  context: context,
                  builder: (_) {
                    return NewScreen();
                  });
            },
          ),
        ),
      ),
    );
  }
}

class NewScreen extends StatefulWidget {
  @override
  _NewScreenState createState() => _NewScreenState();
}

class _NewScreenState extends State<NewScreen> {
  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      elevation: 0.0,
      child: Container(
        color: Colors.white,
        margin: EdgeInsets.all(40),
        child: ListView.builder(
          itemCount: 20,
          itemBuilder: (_, index) {
            return Text(index.toString());
          },
        ),
      ),
    );
  }
}