小常识，大应战！本文正在参加“程序员必备小常识”创造活动。

本文同时参加「掘力星计划」，赢取创造大礼包，应战创造激励金。

【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<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,
        ),
      ),
    );
  }
}
  • 代码运行成果

【Flutter】基础组件【03】Scaffold

  • 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

【Flutter】基础组件【03】Scaffold

更具体的Scaffold的内容看这里api.flutter.dev/flutter/mat…

3. 写在后边

重视我，更多内容继续输出

  • CSDN
  • 简书

喜爱就点个赞吧

觉得有收成的，可以来一波 保藏+重视，避免你下次找不到我

欢迎大家留言沟通，批评指正，转发请注明出处，谢谢支撑！