Flutter组件————Scaffold
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int pageIndex = 0;
//所有右侧行为按钮
List<Widget> actionList = const [
Icon(Icons.social_distance),
SizedBox(
width: 30,
),
Icon(Icons.cyclone),
SizedBox(
width: 30,
),
Icon(Icons.manage_accounts),
SizedBox(
width: 40,
)
];
List<Widget> pageList = const [
Text("首页"),
Text("新增"),
Text("用户"),
];
void floatBtnFunc() {
debugPrint("点击了悬浮按钮");
HapticFeedback.vibrate();
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary, //背景颜色
foregroundColor: const Color.fromARGB(135, 226, 5, 255),
// leading: const Icon(Icons.accessibility_new_rounded), //左侧按钮
title: const Text("Flutter 示例"), //标题
// actions: actionList, //右侧按钮
elevation: 10, //下方阴影
shadowColor: const Color.fromARGB(136, 0, 225, 255), //阴影颜色
centerTitle: true, // 标题是否居中（ios默认居中，Android默认居左）
surfaceTintColor: const Color.fromARGB(172, 249, 128, 0), //表面颜色
toolbarHeight: 50, //顶部栏高度
iconTheme: const IconThemeData(
size: 20, color: Color.fromARGB(207, 255, 251, 0)), //控制内部元素样式
primary: true, // 是否显示主要按钮
titleSpacing: 10, //标题内边距
bottom: const TabBar(tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
]), //顶部栏底部按钮
shape: const RoundedRectangleBorder(
borderRadius:
BorderRadius.vertical(bottom: Radius.circular(15)) //顶部栏底部按钮样式
),
), //顶部栏
body: Center(
child: ListView(
padding: const EdgeInsets.only(top: 15),
children: [
Row(
children: [pageList[pageIndex]],
)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: floatBtnFunc, //点击事件
tooltip: "悬浮按钮", //长按提示信息
backgroundColor: Colors.blue, //背景颜色
foregroundColor: Colors.white, // 内部组件颜色
elevation: 10, //阴影
shape: ShapeBorder.lerp(
const CircleBorder(), const CircleBorder(), 0.5), //按钮形状
mini: false, //是否小尺寸
hoverColor: Colors.green, //悬浮颜色
splashColor: Colors.yellow, //点击颜色
focusColor: Colors.red, //获取焦点颜色
autofocus: true, //是否自动获取焦点
clipBehavior: Clip.hardEdge, //裁剪方式
child: const Icon(Icons.info), // //按钮内部组件
), //浮动按钮
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked, //浮动按钮位置
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home), //图标
label: "首页", //标签
tooltip: "首页", //长按提示信息
backgroundColor: Colors.blueAccent, //背景颜色
activeIcon: Icon(Icons.home_filled), //选中图标
),
BottomNavigationBarItem(icon: Icon(Icons.add), label: "新增"),
BottomNavigationBarItem(icon: Icon(Icons.verified_user), label: "用户"),
], //底部导航栏
currentIndex: pageIndex, //当前页面索引
onTap: (index) {
setState(() {
pageIndex = index;
});
}, //点击事件
type: BottomNavigationBarType.fixed, //导航栏的类型
iconSize: 25, //图标大小
elevation: 20, //阴影
selectedFontSize: 12, //选中字体大小
unselectedFontSize: 12, //未选中字体大小
selectedItemColor: Colors.blue, //选中颜色
unselectedItemColor: Colors.black, //未选中颜色
showUnselectedLabels: true, //是否显示未选中的标签
selectedLabelStyle: const TextStyle(color: Colors.blue), //选中文本样式
unselectedLabelStyle: const TextStyle(color: Colors.black), //未选中文本样式
backgroundColor: const Color.fromARGB(255, 99, 255, 247),
showSelectedLabels: true, //分别控制是否显示选中和未选中的标签文本，默认都是显示的
),
backgroundColor: Colors.white24, //背景颜色
persistentFooterButtons: const [Icon(Icons.add_a_photo_outlined),Icon(Icons.add_alarm_rounded)], //底部固定按钮
drawer: Drawer(child: ListView(children: const [Text("侧边栏")],),), //左侧边栏（不可以使用appBar的leader）
endDrawer: Drawer(child: ListView(children: const [Text("右侧侧边栏")],),) // 右侧边栏(不可以使用appBar的actions)
);
}
}