【Flutter】基础组件【03】Scaffold

flutter.jpeg

【Flutter】学习养成记，【程序员必备小知识】

今日小知识——【Flutter】基础组件【03】Scaffold！

1. 写在前面

在上篇文章中介绍了Flutter中的Container组件，今天继续学习【Flutter】基础组件中的Scaffold组件。

【基础语法合集】

【Flutter】Dart中的var、final 和 const基本使用

【Flutter】Dart数据类型之num

【Flutter】Dart数据类型之String

【Flutter】Dart的数据类型list&Map(数组和字典)

【Flutter】Dart的方法与箭头函数

【Flutter】Dart的方法中的可选参数、方法作为参数传递

【Flutter】Dart中的匿名函数、闭包

【Flutter】Dart中的类和对象

【Flutter】Dart中的构造函数

【Flutter】Dart的工厂构造方法&单例对象&初始化列表

【Flutter】Dart的类方法和对象操作符

【Flutter】Dart中的继承

【Flutter】Dart中的抽象类和接口

【Flutter】Dart中的Mixins混入你知道是什么吗？

[基础组件合集]
【Flutter】基础组件【01】Text

【Flutter】基础组件【02】Container

2. 什么是Scaffold？

Scaffold是Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。

2.1 主要的属性

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 {
    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 {
    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. 写在后面

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

CSDN
掘金

喜欢就点个赞吧

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

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