Flutter 初学者

路由view

class ZiqiongApp extends StatelessWidget {
  const ZiqiongApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '不显示标题',
      routes: {
        '/': (context) => const HomePage(),
        '/second': (context) => const SecondPage()
      },
    );
  }
}

页面View

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('可显示的标题')),
        body: Column(
          children: [
            const Text('一行文本'),
            Expanded(
                child: Center(
              child: ElevatedButton(
                  child: Text('跳转第二页'),
                  onPressed: () {
                    Navigator.pushNamed(context, '/second');
                  }),
            ))
          ],
        ));
  }
}

Scaffold 提供完整的页面框架

• AppBar: 顶部标题栏

• body: 主体内容

• drawer: 左侧抽屉

        drawer: Drawer(
          child: ListView(
            children: <Widget>[
              const DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
                child: Text('抽屉头部'),
              ),
              ListTile(
                title: const Text('项 1'),
                onTap: () {
                  // 更新内容或导航
                },
              ),
              ListTile(
                title: const Text('项 2'),
                onTap: () {
                  // 更新内容或导航
                },
              ),
            ],
          ),
        ),

• bottomNavigationBar: 底部tab栏

        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: '首页',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.business),
              label: '业务',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.school),
              label: '学校',
            ),
          ],
          onTap: (index) {
            // 在这里处理点击事件
          },
        ),

• floatingActionButton: 右下角浮动按钮

  ///
  floatingActionButton: FloatingActionButton(
            onPressed: () {
              // 这里可以添加点击事件的逻辑
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(
                  content: Text('底部浮动消息'),
                  duration: Duration(seconds: 2),
                ),
              );
            },
            tooltip: '长按的提示文本',
            child: const Icon(Icons.add)
  ),
  ///