import 'package:flutter/material.dart';
/// home 页
/// @author: dingwen
/// @date: 2021/5/9
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
//顶部标题
appBar: AppBar(
title: Text('Scaffold Widget'),
centerTitle: true,
bottom: PreferredSize(
preferredSize: Size.fromHeight(60.0),
child: Container(
width: double.infinity,
height: 60.0,
child: Center(child: Text('bottom')),
color: Colors.blue,
),
),
),
// 页面显示主体内容
body: Center(child: Text('Scaffold')),
// 左边侧边栏
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 ： 中间偏上
// endFloat ： 底部偏上
// 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: '我的', label: "我的"),
BottomNavigationBarItem(
icon: Icon(Icons.home), tooltip: '首页', label: '首页'),
],
),
// 顶部标题栏大小，默认true
primary: false,
//是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 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('发送'),
)
],
),
),
);
}
}
