Flutter 主要页面布局

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 去掉debug标志
      theme: ThemeData(
        useMaterial3: true, //启用Material3的UI风格
      ),
      home: Scaffold(
        backgroundColor: Colors.deepOrange,
        //设置正文部分背景
        appBar: AppBar(
          backgroundColor: Colors.deepOrange, //设置标题栏部分背景
          title: const Text("这是标题"),
        ),
        body: GestureDetector(
          //通过GestureDetector给text添加单击事件
          onTap: () {
            print('Text clicked!'); // 在控制台输出一个消息
          },
          child: const Text("321"),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            print('Button clicked!');
          },
          child: Icon(Icons.add),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.search),
              label: 'Search',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'Profile',
            ),
          ],
        ),
        drawer: Drawer(
          child: ListView(
            children: [
              UserAccountsDrawerHeader(
                accountName: Text('John Doe'),
                accountEmail: Text('john.doe@example.com'),
                currentAccountPicture: CircleAvatar(
                  backgroundImage: NetworkImage(
                      'https://randomuser.me/api/portraits/men/1.jpg'),
                ),
              ),
              ListTile(
                leading: Icon(Icons.settings),
                title: Text('Settings'),
              ),
              ListTile(
                leading: Icon(Icons.help),
                title: Text('Help'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们使用了 Scaffold 组件来构建页面。我们在 appBar 属性中设置了一个顶部的 AppBar，在 body 属性中设置了一个居中显示的 Text 组件，以及在 floatingActionButton 属性中设置了一个浮动按钮。我们还在 bottomNavigationBar 属性中设置了一个底部导航栏，以及在 drawer 属性中设置了一个侧边栏。

你可以根据自己的需要添加和修改 Scaffold 中的各个属性，来构建自己需要的应用程序页面。