appBar：显示在界面顶部的一个 AppBar
body：当前界面所显示的主要内容
floatingActionButton：在 Material 中定义的一个功能按钮。
persistentFooterButtons：固定在下方显示的按钮。
drawer：侧边栏控件
bottomNavigationBar：显示在底部的导航栏按钮栏。
backgroundColor：背景颜色
resizeToAvoidBottomPadding：控制界面内容 body
是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true。

2.2 代码举例

import 'package:flutter/material.dart';
void main(){

  runApp(App());

}
class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
       home: Home()
    );
  }

}

class _Home extends State<Home> {
    int  _index = 0;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("ScaffoldDemo"),
      ),
      body: MyWidget(),
);
  }


}
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

自定义Widget

//自定义一个Widget，StatelessWidget无状态的，StatefulWidget
class MyWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: const Text(
        "Hello World!",
        textDirection:TextDirection.ltr,
        style: TextStyle(
          fontSize: 25.0,
          fontWeight: FontWeight.bold,
          color: Colors.red,
        ),
      ),
    );
  }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

代码运行结果

代码运行结果.png

bottomNavigationBar

class _Home extends State<Home> {
    int  _index = 0;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("ScaffoldDemo"),
      ),
      body: MyWidget(),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
              color: _index == 0 ? Colors.green : Colors.grey,
            ),
            label: "首页",
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.add,
              color: _index == 1 ? Colors.green : Colors.grey,
            ),
          label:"添加好友",
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.people,
              color: _index == 2 ? Colors.green : Colors.grey,
            ),
            label:"我的",
          )
        ],
        currentIndex: _index,
        //BottomNavigationBar 的点击事件
        onTap: (flag) {
          print("flag = $flag");
          setState(() {
            _index = flag;//切换
          });
        },

      ),
    );
  }

}
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

bottomNavigationBar相当于 OC 的 Tabbar

更详细的Scaffold的内容看这里https://api.flutter.dev/flutter/material/Scaffold-class.html

3. 写在后面

关注我，更多内容持续输出

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/人工智能uu/article/detail/910502