Flutter 基础布局 Scaffold Widget

顾名思义，脚手架，我们在此基础上进行搭建组建进行布局，只要是在 Material 中定义的单个界面显示的 Widget 都可以使用它，它提供了诸如：抽屉（drawers）底部按钮（bottom sheets）和 底部通知（snack bars），你可以认为它是一基本快速实现某些布局的容器 Widget。

appBar

• title 导航

  appBar: AppBar(
    //导航标题
    title: Text('Scaffold Title'),
    //阴影大小
    elevation: 10,
    //导航栏右侧菜单
    actions: <Widget>[
      IconButton(
          icon: Icon(Icons.shopping_cart), tooltip: "购物", onPressed: null)
    ],
    //标题是否剧中
    centerTitle: true,
    //导航栏左侧按钮
    leading: IconButton(
        icon: Icon(Icons.menu), tooltip: "菜单", onPressed: null),
    //导航栏为空时，是否自动实现默认leading
    automaticallyImplyLeading: true,
  ),

image.png

body

• 内容部分

body: Text("body data"),

bottomNavigationBar

• 底部导航部分

  bottomNavigationBar: BottomNavigationBar(
    items: <BottomNavigationBarItem>[
      BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("Home")),
      BottomNavigationBarItem(
          icon: Icon(Icons.business), title: Text("Business")),
      BottomNavigationBarItem(
          icon: Icon(Icons.school), title: Text("School")),
    ],
    currentIndex: _selectedIndex,
    fixedColor: Colors.blue,
    onTap: _onItemTap,
  ),

image.png

drawer

• 侧滑菜单部分

  drawer: Drawer(
    child: Drawer(
      child: DrawerHeader(
        child: Text("DrawerHeader"),
      ),
    ),
  ),

image.png

floatingActionButton

• 底部悬浮按钮

  floatingActionButton: FloatingActionButton(
    onPressed: null,
    child: Text("按钮"),
  ),

image.png

完整示例

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ScaffoldExample extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ScaffoldExampleState();
  }
}

class ScaffoldExampleState extends State<ScaffoldExample> {
  int _selectedIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        //导航标题
        title: Text('Scaffold Title'),
        //阴影大小
        elevation: 10,
        //导航栏右侧菜单
        actions: <Widget>[
          IconButton(
              icon: Icon(Icons.shopping_cart), tooltip: "购物", onPressed: null)
        ],
        //标题是否剧中
        centerTitle: true,
        //导航栏左侧按钮
        leading:
            IconButton(icon: Icon(Icons.menu), tooltip: "菜单", onPressed: null),
        //导航栏为空时，是否自动实现默认leading
        automaticallyImplyLeading: true,
      ),
      body: Text("body data"),
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("Home")),
          BottomNavigationBarItem(
              icon: Icon(Icons.business), title: Text("Business")),
          BottomNavigationBarItem(
              icon: Icon(Icons.school), title: Text("School")),
        ],
        currentIndex: _selectedIndex,
        fixedColor: Colors.blue,
        onTap: _onItemTap,
      ),
      drawer: Drawer(
        child: Drawer(
          child: DrawerHeader(
            child: Text("DrawerHeader"),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: null,
        child: Text("按钮"),
      ),
    );
  }
  void _onItemTap(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}