import 'package:flutter/material.dart';
import 'package:untitled/pages/People_item_page.dart';
import 'package:untitled/pages/email_item_page.dart';
import 'package:untitled/pages/home_item_page.dart';
class ScffoldHomePage extends StatefulWidget {
const ScffoldHomePage({Key? key}) : super(key: key);
@override
State<ScffoldHomePage> createState() => _ScffoldHomePageState();
}
class _ScffoldHomePageState extends State<ScffoldHomePage> {
// 当前选中的页面
int index = 0;
// 定义三个页面
List<Widget> pageWidgetList = [
HomeItemPage(),
EmalItemPage(),
PeopleItemPage(),
];
@override
Widget build(BuildContext context) {
// 使用 scaffold 组件来构建应用基本页面
return Scaffold(
appBar: AppBar(
title: const Text("这里是首页"),
),
body:pageWidgetList[index],
// 定义的悬浮按钮
floatingActionButton: FloatingActionButton(
child: const Text("++"),
onPressed: (){
print("点击了 FloatingActionButton");
},
tooltip: "点击了 tooltip",
//设置悬浮按钮的背景
backgroundColor: Colors.red,
// 获取焦点时显示的颜色
focusColor: Colors.yellow,
/// 水波纹颜色
splashColor: Colors.deepPurple,
/// 配置阴影高度
elevation: 0.0,
highlightElevation: 20.0,
),
/// 用来控制 FloatingActionButton 的位置
/// FloatingActionButtonLocation.endFloat 默认使用浮动右下角
/// FloatingActionButtonLocation.endDocked 右下角
/// FloatingActionButtonLocation.endTop 右上角
/// FloatingActionButtonLocation.startTop 左上角
/// FloatingActionButtonLocation.centerFloat 底部中间浮动
/// FloatingActionButtonLocation.centerDecked 底部中间不浮动
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
/// 左侧拉菜单页面
drawer: Container(
color: Colors.grey,
width: 120,
child: FlatButton(
onPressed: (){
///打开左侧菜单
Navigator.of(context).pop();
},
child: const Text("关闭左侧菜单")
),
),
/// 右侧拉菜单页面
endDrawer: Container(
color: Colors.yellow,
width: 200,
child: FlatButton(
onPressed: (){
///打开左侧菜单
Navigator.of(context).pop();
},
child: const Text("关闭右侧菜单")
),
),
// 底部导航菜单栏
bottomNavigationBar: BottomNavigationBar(
items: [
/// 参数一icon 图标
const BottomNavigationBarItem(
icon: Icon(
Icons.home,
color:Colors.grey
),
// 选中状态下的图标颜色
activeIcon: Icon(
Icons.home,
color:Colors.blue
),
label:"首页"),
BottomNavigationBarItem(icon: Icon(Icons.email,color: index==1?Colors.blue:Colors.grey),label: "邮箱"),
BottomNavigationBarItem(icon: Icon(Icons.people,color: index==2?Colors.blue:Colors.grey),label: "我的"),
],
// 点击事件
onTap: (flag){
print("flag $flag");
//index = flag;
setState(() {
index = flag;
});
},
/// 设置当前的导航页面索引
currentIndex: index,
),
);
}
}
Flutter(2) Scaffold 用来做页面的基础开发支持
于 2022-05-16 21:37:50 首次发布