一、主要的属性说明
- appBar:显示在界面顶部的一个 AppBar
- body:当前界面所显示的主要内容
- floatingActionButton: 在 Material 中定义的一个功能按钮。
- persistentFooterButtons:固定在下方显示的按钮。
- drawer:侧边栏控件
- bottomNavigationBar:显示在底部的导航栏按钮栏。可以查看文档:Flutter学习之制作底部菜单导航
- backgroundColor:背景颜色
- resizeToAvoidBottomPadding: 控制界面内容 body
是否重新布局来避免底部被覆盖了,比如当键盘显示的时候,重新布局避免被键盘盖住内容。默认值为 true。
二、示例代码
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Scaffold组件',
home: DemoPage(),
);
}
}
class DemoPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
//应用栏
appBar: AppBar(
backgroundColor: Colors.red,
title: Text('标题',style: TextStyle(color: Colors.white),),
centerTitle: true,
elevation: 10.0,
leading: Icon(Icons.home),
actions: <Widget>[
Icon(Icons.add),
],
bottom: PreferredSize(
child: Container(
height: 50.0,
child: Center(
child: Text('显示在标题下面的内容'),
),
decoration: BoxDecoration(
color: Colors.redAccent,
),
),
preferredSize: Size.fromHeight(50.0),
),
),
//内容区域
body: Center(
child: Text('中间内容部分',style: TextStyle(color: Colors.red,fontSize: 36.0),),
),
//侧边栏 抽屉组件
drawer: Drawer(
child: Center(
child: Container(
width: 150.0,
color: Colors.orange,
child: Text('侧边栏',style: TextStyle(color: Colors.white,fontSize: 24.0),),
),
)
),
//底部 持久化按钮
persistentFooterButtons: <Widget>[
Icon(Icons.person),
Icon(Icons.add),
Icon(Icons.print),
Icon(Icons.apps),
Icon(Icons.chat),
],
//底部 导航按钮
bottomNavigationBar: BottomNavigationBar(
currentIndex: 1,
fixedColor: Colors.redAccent,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('主页'),
),
BottomNavigationBarItem(
icon: Icon(Icons.chat),
title: Text('聊天'),
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text('我的'),
),
],
),
//底部 FAB按钮
floatingActionButton: Builder(
builder: (BuildContext context){
return FloatingActionButton(
backgroundColor: Colors.red,
child: Icon(Icons.add),
onPressed: (){
var snackbar = new SnackBar(
content: Text('显示SnackBar'),
backgroundColor: Colors.red,
duration: Duration(
milliseconds : 1500,
),
action: SnackBarAction(
label: '撤销',
onPressed: (){}
),
);
Scaffold.of(context).showSnackBar(snackbar);
},
);
}
)
);
}
}
运行后的第一个页面,每个部位含义在代码均有解释
从屏幕左侧往右滑,出现侧边栏
点击右下角红圈白色的 + 按钮(即FAB 按钮),将显示 SnackBar、撤销 字样