Flutter:脚手架组件Scaffold

xiaohai 2021-08-10 20:01:41 3244人围观 标签: Flutter 
简介Scaffold通常被用作MaterialApp的子Widget,它会填充可用空间,占据整个窗口或设备屏幕。Scaffold提供了大多数应用程序都应该具备的功能,例如顶部的appBar,底部的bottomNavigationBar,隐藏的侧边栏drawer等。

在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],
    );
  }
}