该示例代码使用了3个按钮控件作为布局演示，同时添加了手势操作。以及封装。
代码来源参考： https://juejin.cn/post/7030934610452152356
import 'package:flutter/material.dart';
void main(List<String> args) {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Container(
margin: const EdgeInsets.only(top: 10),
child: BottomBar(
items: const [
Item("CALL", Icons.call),
Item("ROUTER", Icons.near_me),
Item("SHARE", Icons.share),
],
onTabSelect: (index) {
print("$index");
}),
),
),
);
}
}
class Item {
final String name;
final IconData? icon;
const Item(this.name, this.icon);
}
typedef OnTabSelect = void Function(int value);
class BottomBar extends StatefulWidget {
final List<Item> items;
final OnTabSelect? onTabSelect;
const BottomBar({
super.key,
required this.items,
this.onTabSelect,
});
@override
State<BottomBar> createState() => _BottomBarState();
}
class _BottomBarState extends State<BottomBar> {
final _selectMap = {};
@override
void initState() {
super.initState();
for (var i = 0; i < widget.items.length; i++) {
_selectMap[widget.items[i].name] = i == 0 ? true : false;
}
}
@override
void dispose() {
_selectMap.clear();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
for (var item in widget.items)
GestureDetector(
onTap: () {
setState(() {
for (var i = 0; i < widget.items.length; i++) {
_selectMap[widget.items[i].name] = false;
}
_selectMap[item.name] = true;
});
if (widget.onTabSelect != null) {
widget.onTabSelect!(widget.items.indexOf(item));
}
},
child: Container(
color: Colors.grey.withOpacity(0.001),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
item.icon,
color: _selectMap[item.name] ? Colors.blue : Colors.grey,
),
Container(
margin: const EdgeInsets.only(top: 8),
child: Text(
item.name,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w400,
color:
_selectMap[item.name] ? Colors.blue : Colors.grey,
),
),
)
],
),
),
)
],
);
}
}
