Flutter——最详细(Scaffold)使用教程

Scaffold简介

相当于界面的主体（类似于安卓最外层PhoneWindow），组件的展示都必须依附于它。

使用场景：

每一个界面都是脚手架，通过它来进行架构实现，优美的布局效果。

endDrawer 属性效果

      endDrawer: Container(
        color: Colors.white,
        width: 200,
        child: Center(
          child: Column(
            children: [
              Text('测试endDrawer'),
              Text('测试endDrawer'),
            ],
          ),
        ),
      )
1
2
3
4
5
6
7
8
9
10
11
12

floatingActionButton 属性
floatingActionButtonLocation: 属性 startFloat、centerFloat、endFloat、 等几个属性

floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      )
1
2
3
4
5
6

body： 属性代表布局的身体，相当于红色这一区域；
backgroundColor： 整体红色区域部分的背景颜色；

drawer： 左侧滑动组件

  drawer: Container(
        color: Colors.white,
        width: 200,
        child: Center(
          child: Column(
            children: [
              Text('测试drawer'),
              Text('测试drawer'),
            ],
          ),
        ),
      ),
1
2
3
4
5
6
7
8
9
10
11
12

bottomNavigationBar： 底部菜单栏按钮

   bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: '搜索',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: '设置',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.blue,
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
      )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

persistentFooterButtons: 显示在基架底部的一组按钮。

      persistentFooterAlignment:  AlignmentDirectional.bottomEnd,
      persistentFooterButtons: [
        TextButton(
          onPressed: () {
            // 按钮1的点击事件处理逻辑
          },
          child: Text('按钮1'),
        ),
        TextButton(
          onPressed: () {
            // 按钮2的点击事件处理逻辑
          },
          child: Text('按钮2'),
        ),
      ],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

整体代码块

import 'package:flutter/material.dart';

class ScaffoldPage extends StatefulWidget {
  const ScaffoldPage({Key? key}) : super(key: key);

  @override
  State<ScaffoldPage> createState() => _ScaffoldPageState();
}

class _ScaffoldPageState extends State<ScaffoldPage> {
  int _selectedIndex = 0;

  List<Widget> _widgetOptions = [
    // 每个选项对应的页面或小部件
    // 可以根据需要替换为自己的页面或小部件
    Text('首页'),
    Text('搜索'),
    Text('设置'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('测试脚手架'),
      ),
      backgroundColor: Colors.blueAccent,
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      endDrawer: Container(
        color: Colors.white,
        width: 200,
        child: Center(
          child: Column(
            children: [
              Text('测试endDrawer'),
              Text('测试endDrawer'),
            ],
          ),
        ),
      ),
      drawer: Container(
        color: Colors.white,
        width: 200,
        child: Center(
          child: Column(
            children: [
              Text('测试drawer'),
              Text('测试drawer'),
            ],
          ),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: '搜索',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: '设置',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.blue,
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
        persistentFooterAlignment:  AlignmentDirectional.bottomEnd,
      persistentFooterButtons: [
        TextButton(
          onPressed: () {
            // 按钮1的点击事件处理逻辑
          },
          child: Text('按钮1'),
        ),
        TextButton(
          onPressed: () {
            // 按钮2的点击事件处理逻辑
          },
          child: Text('按钮2'),
        ),
      ],
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

项目地址

https://github.com/z244370114/flutter_demo