Flutter Widget - Scaffold

Flutter Widgets

Flutter 2.0.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 60bd88df91 (10 weeks ago) • 2021-03-03 09:13:17 -0800
Engine • revision 40441def69
Tools • Dart 2.12.0

1.材料设计根控件 MaterialApp
2.页面基础布局 Scaffold

一、概览图

二、Scaffold是什么？

Scaffold 实现了基本的 Material 布局。只要是在 Material 中定义了的单个界面显示的布局控件元素，都可以使用 Scaffold 来绘制。

三、详细

import 'package:flutter/material.dart';

/// home 页
/// @author: dingwen
/// @date: 2021/5/9
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //顶部标题
      appBar: AppBar(
        title: Text('Scaffold Widget'),
        centerTitle: true,
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(60.0),
          child: Container(
            width: double.infinity,
            height: 60.0,
            child: Center(child: Text('bottom')),
            color: Colors.blue,
          ),
        ),
      ),

      // 页面显示主体内容
      body: Center(child: Text('Scaffold')),

      // 左边侧边栏
      drawer: Drawer(),

      // 右边侧边栏
      endDrawer: Drawer(),

      // 按钮出现消失动画。可以自己实现
      // floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
      floatingActionButton: Builder(
        builder: (c){
          return FloatingActionButton(
            onPressed: () {
              showModalBottomSheet(
                  context: context,
                  builder: (BuildContext bc) {
                    return Stack(
                      children: <Widget>[
                        Container(
                          height: 30.0,
                          width: double.infinity,
                          color: Colors.black54,
                        ),
                        Container(
                          decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(25),
                                topRight: Radius.circular(25),
                              )),
                        ),
                        Center(
                          child: Text(
                            "bottomSheet的内容",
                          ),
                        ),
                      ],
                    );
                  });
            },
            child: Icon(Icons.ac_unit),
          );
        },
      ),

      // 悬浮按钮位置
      // centerDocked : 底部中间
      // endDocked  : 底部右侧
      // centerFloat ： 中间偏上
      // endFloat ： 底部偏上
      // startTop : 左侧顶部
      // endTop : 右侧顶部
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

      // 底部持久化按钮
      persistentFooterButtons: [
        Icon(Icons.seven_k),
        Icon(Icons.add),
        Icon(Icons.bluetooth_searching)
      ],

      //底部导航按钮
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: 1,
        fixedColor: Colors.deepOrangeAccent,
        items: <BottomNavigationBarItem>[
          // 至少是两个
          BottomNavigationBarItem(
              icon: Icon(Icons.person), tooltip: '我的', label: "我的"),
          BottomNavigationBarItem(
              icon: Icon(Icons.home), tooltip: '首页', label: '首页'),
        ],
      ),

      // 顶部标题栏大小，默认true
      primary: false,

      //是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true
      resizeToAvoidBottomInset: true,

      // 页面背景颜色
      backgroundColor: Colors.grey[200],

      bottomSheet: Container(
        color: Colors.white,
        width: double.infinity, // 占满屏幕宽度
        height: 60.0,
        child: Row(
          children: <Widget>[
            Expanded(child: TextField()),
            RaisedButton(
              onPressed: () {},
              child: Text('发送'),
            )
          ],
        ),
      ),
    );
  }


}