flutter - 在移动设备中实现 Flutter Web 的菜单

Question

您好，我最近在 Flutter Web 上启动了一个项目，但在 NavBar 中实现 Menu for Mobile 视图时遇到问题。 开始。这就是我单击菜单图标时所需要的。 点击

标签： flutterflutter-layout

Answer 1

您正在寻找的特定类型的小部件称为抽屉。您可以访问 https://flutter.dev/docs/cookbook/design/drawer了解完整详情。让我也举一个抽屉代码的例子。

class Trial extends State<State1> {
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Center(
                child: Text(
                  'Choose an Option:',
                  style: TextStyle(
                    fontSize: 30,
                  ),
                ),
              ),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            Padding(
              child: Card(
                child: ListTile(
                  leading: Icon(
                    Icons.add,
                    size: 35,
                  ),
                  title: Text(
                    'Increment by 2',
                    style: TextStyle(
                      fontSize: 20,
                    ),
                    textAlign: TextAlign.center,
                  ),
                  onTap: () {
                    setState(() {
                      increment = 2;
                      Navigator.pop(context);
                    });
                  },
                ),
              ),
              padding: EdgeInsets.all(9.0),
            ),
          ],
        ),
      ),
    );
}

请注意。这不是要求的特定代码。我只提供了一个简洁的示例，可以对其进行调整以获得必要的结果。