【Flutter】基础组件【03】Scaffold

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(),
);
  }


}

自定义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,
        ),
      ),
    );
  }

}

代码运行结果

代码运行结果.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;//切换
          });
        },

      ),
    );
  }

}

bottomNavigationBar相当于 OC 的 Tabbar

效果展示.png

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

3. 写在后面

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

🌹 喜欢就点个赞吧👍🌹

🌹 觉得有收获的，可以来一波收藏+关注，以免你下次找不到我😁🌹

🌹欢迎大家留言交流，批评指正，转发请注明出处，谢谢支持！🌹

【Flutter】基础组件【03】Scaffold

1. 写在前面

2. 什么是Scaffold？

2.1 主要的属性

2.2 代码举例

3. 写在后面

猜你喜欢

热点阅读