Flutter:脚手架组件Scaffold
简介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],
);
}
}