Flutter Scaffold


简介

Scaffold 实现了基本的Material Design布局结构

在Material设计中定义的单个界面上的各种布局元素，在 Scaffold 中都有支持，比如 左边栏（Drawers）、snack bars、以及 bottom sheets。

基本用法

Scaffold 有下面几个主要属性：

  • appBar：显示在界面顶部的一个 AppBar

  • body：当前界面所显示的主要内容 Widget

  • floatingActionButton：Material设计中所定义的 FAB，界面的主要功能按钮

  • persistentFooterButtons：固定在下方显示的按钮，比如对话框下方的确定、取消按钮

  • drawer：侧边栏控件

  • backgroundColor： 内容的背景颜色，默认使用的是 ThemeData.scaffoldBackgroundColor 的值

  • bottomNavigationBar： 显示在页面底部的导航栏

  • resizeToAvoidBottomPadding：控制界面内容 body 是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true。

实例演示

import 'package:flutter/material.dart';

class ScaffoldDemo extends StatefulWidget {
  const ScaffoldDemo() : super();

  @override
  State<StatefulWidget> createState() => _ScaffoldDemo();
}

/*
* AppBar 默认的实例,有状态
* */
class _ScaffoldDemo extends State with SingleTickerProviderStateMixin {
  int count = 0;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 如果省略了 leading ，但 AppBar 在带有 Drawer 的 Scaffold 中，则会插入一个 button 以打开 Drawer。
    // 否则，如果最近的 Navigator 具有任何先前的 router ，则会插入BackButton。
    // 这种行为可以通过设置来关闭automaticallyImplyLeading 为false。在这种情况下，空的 leading widget 将导致 middle/title widget 拉伸开始。
    return  SizedBox(
        height: 500,
        child:  Scaffold(
          appBar: AppBar(
            title: Text('Sample Code'),
          ),
          body: Center(
            child: Text('You have pressed the button times. $count'),
          ),
          floatingActionButtonLocation:
              FloatingActionButtonLocation.centerDocked,
          floatingActionButton: FloatingActionButton(
            onPressed: () => setState(() {
                  count += 1;
                }),
            tooltip: 'Increment Counter',
            child: Icon(Icons.add),
          ),
        ));
  }
}