开发笔记:FlutterWidgetScaffold

Flutter 2.0.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 60bd88df91 (10 weeks ago) • 2021-03-03 09:13:17 -0800
Engine • revision 40441def69
Tools • Dart 2.12.0

1.材料设计根控件 MaterialApp
2.页面基础布局 Scaffold

Scaffold 实现了基本的 Material 布局。只要是在 Material 中定义了的单个界面显示的布局控件元素&＃xff0c;都可以使用 Scaffold 来绘制。

import &＃39;package:flutter/material.dart&＃39;;
/// home 页
/// &＃64;author: dingwen
/// &＃64;date: 2021/5/9
class HomePage extends StatefulWidget {
&＃64;override
_HomePageState createState() &＃61;> _HomePageState();
}
class _HomePageState extends State<HomePage> {
&＃64;override
Widget build(BuildContext context) {
return Scaffold(
//顶部标题
appBar: AppBar(
title: Text(&＃39;Scaffold Widget&＃39;),
centerTitle: true,
bottom: PreferredSize(
preferredSize: Size.fromHeight(60.0),
child: Container(
width: double.infinity,
height: 60.0,
child: Center(child: Text(&＃39;bottom&＃39;)),
color: Colors.blue,
),
),
),
// 页面显示主体内容
body: Center(child: Text(&＃39;Scaffold&＃39;)),
// 左边侧边栏
drawer: Drawer(),
// 右边侧边栏
endDrawer: Drawer(),
// 按钮出现消失动画。可以自己实现
// floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
floatingActionButton: Builder(
builder: (c){
return FloatingActionButton(
onPressed: () {
showModalBottomSheet(
context: context,
builder: (BuildContext bc) {
return Stack(
children: <Widget>[
Container(
height: 30.0,
width: double.infinity,
color: Colors.black54,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(25),
topRight: Radius.circular(25),
)),
),
Center(
child: Text(
"bottomSheet的内容",
),
),
],
);
});
},
child: Icon(Icons.ac_unit),
);
},
),
// 悬浮按钮位置
// centerDocked : 底部中间
// endDocked : 底部右侧
// centerFloat &＃xff1a; 中间偏上
// endFloat &＃xff1a; 底部偏上
// startTop : 左侧顶部
// endTop : 右侧顶部
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
// 底部持久化按钮
persistentFooterButtons: [
Icon(Icons.seven_k),
Icon(Icons.add),
Icon(Icons.bluetooth_searching)
],
//底部导航按钮
bottomNavigationBar: BottomNavigationBar(
currentIndex: 1,
fixedColor: Colors.deepOrangeAccent,
items: <BottomNavigationBarItem>[
// 至少是两个
BottomNavigationBarItem(
icon: Icon(Icons.person), tooltip: &＃39;我的&＃39;, label: "我的"),
BottomNavigationBarItem(
icon: Icon(Icons.home), tooltip: &＃39;首页&＃39;, label: &＃39;首页&＃39;),
],
),
// 顶部标题栏大小&＃xff0c;默认true
primary: false,
//是否重新布局来避免底部被覆盖了&＃xff0c;比如当键盘显示的时候&＃xff0c;重新布局避免被键盘盖住内容。默认值为 true
resizeToAvoidBottomInset: true,
// 页面背景颜色
backgroundColor: Colors.grey[200],
bottomSheet: Container(
color: Colors.white,
width: double.infinity, // 占满屏幕宽度
height: 60.0,
child: Row(
children: <Widget>[
Expanded(child: TextField()),
RaisedButton(
onPressed: () {},
child: Text(&＃39;发送&＃39;),
)
],
),
),
);
}
}