android flutter--Scaffold

Scaffold翻译为脚手架，骨架，Scaffold是一个路由页的骨架，我们使用它可以很容易地拼装出一个完整的页面。Scaffold实现了基本的 Material Design 布局结构。在 Material 设计中定义的单个界面上的各种布局元素，在 Scaffold 中都支持。

Scaffold 主要属性：

appBar - 显示在界面顶部的一个 AppBar。
body - 当前界面所显示的主要内容 Widget。
floatingActionButton - Material 设计中所定义的 FAB，界面的主要功能按钮。
persistentFooterButtons - 固定在下方显示的按钮，比如对话框下方的确定、取消按钮。
drawer - 抽屉菜单控件。
backgroundColor - 内容的背景颜色，默认使用的是 ThemeData.scaffoldBackgroundColor 的值。
bottomNavigationBar - 显示在页面底部的导航栏。
resizeToAvoidBottomPadding - 类似于 Android 中的 android:windowSoftInputMode=‘adjustResize’，控制界面内容 body 是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true。

代码和图解：

完整代码：

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false, //Flutter去除右上角Debug
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("龙腾腾"),
        ),
        body: Center(
          child: Text("你好"),
        ),
        drawer: Drawer(), //左侧边栏
        endDrawer: Drawer(), //右侧边栏
      ),
    );
  }
}

注：1、debugShowCheckedModeBanner: false, //Flutter去除右上角Debug
2、theme: new ThemeData(primaryColor: Colors.blue, ) //项目的主题色
3、 width: double.infinity, //占满

完整代码：

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false, //Flutter去除右上角Debug
      theme: new ThemeData(
        primaryColor: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("龙腾腾"),
        ),
        body: Center(
          child: Text("你好"),
        ),
        drawer: Drawer(),
        //左侧边栏
        endDrawer: Drawer(),
        //右侧边栏
        bottomNavigationBar: BottomNavigationBar(items: [
          BottomNavigationBarItem(title: Text("home"), icon: Icon(Icons.home)),
          BottomNavigationBarItem(
              title: Text("school"), icon: Icon(Icons.school))
        ]),
        //默认选中第一项
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        bottomSheet: BottomSheet(
            onClosing: () {},
            backgroundColor: Colors.blue,
            builder: (context) {
              return Container(
                width: double.infinity,
                height: 50,
                child: Center(
                  child: Text("bottomSheet"),
                ),
              );
            }), //通常很少直接使用 BottomSheet 而是使用 showModalBottomSheet。(这是官网原话,后续会说明使用)
      ),
    );
  }
}