2.3、脚手架组件Scaffold

在Material Design中Scaffold实现了基本的布局，只要在Material Design中定义过的单个界面显示的布局组件原始，都可以使用Scaffold来绘制。

Scaffold组件属性和描述：

• 1、appBar：AppBar类型，显示在界面顶部的AppBar
• 2、body：Widget类型，当前界面显示的主要内容
• 3、floatingActionButton：Widget类型，浮动的操作按钮
• 4、floatingActionButtonLocation：FloatingActionButtonLocation类型，浮动操作按钮显示位置
• 5、persistentFooterButtons：List类型，固定在下方显示的按钮i
• 6、drawer：Widget类型，侧边栏组件
• 7、bottomNavigationBar：Widget类型，显示在底部的导航栏按钮栏
• 8、backgroundColor：Color类型，背景颜色
• 9、resizeToAvoidBottomPadding：bool类型，控制界面内容body是否重新布局来避免底部被覆盖。例如：当键盘显示时，重新布局避免被键盘盖住内容

Scaffold的基本使用

import 'package:flutter/material.dart';

void main() {
  runApp(new App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AppHomePage(),
      color: Colors.yellow,
      debugShowMaterialGrid: false,
      debugShowCheckedModeBanner: false,
      title: 'Material Design',
      theme: ThemeData(
        primaryColor: Colors.yellow[500], //设置应用的主要颜色为黄色
      ),
    );
  }
}

class AppHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Scaffold组件"),
      ),
      body: Center(
        child: Text('首页'),
      ),
      floatingActionButton: FloatingActionButton(
        tooltip: '按下按钮',
        child: Icon(Icons.add),
        onPressed: () {},
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        child: Container(
          color: Colors.blue[100],
          height: 50.0,
        ),
      ),
      backgroundColor: Colors.red[100],
    );
  }
}