flutter - Flutter - TabBar中不同的浮动操作按钮
问题描述
我试图TabBar
在颤动中获得一个不同的浮动按钮。但我会尝试很多选择,但我不知道如何。
抱歉,我添加了更多详细信息:我想做一个带有 的应用程序TabBar
,例如这个颤振示例。如果您看到这是一个tabBarDemo
应用程序,我可以在选项卡之间进行更改,但我不知道如何更改选项卡之间的浮动按钮。谢谢
喜欢这个 gif:https ://i.stack.imgur.com/bxtN4.gif
class TabBarDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
title: Text('Tabs Demo'),
),
body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
floatingActionButton: FloatingActionButton.extended
(onPressed: null,
icon: Icon(Icons.add, color: Colors.white,),
label: new Text('FLOATING TO CHANGE'),
),
floatingActionButtonLocation:FloatingActionButtonLocation.centerFloat,
),
),
);
}
}
解决方案
您想要的最小示例:
class TabsDemo extends StatefulWidget {
@override
_TabsDemoState createState() => _TabsDemoState();
}
class _TabsDemoState extends State<TabsDemo>
with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(length: 2, vsync: this, initialIndex: 0);
_tabController.addListener(_handleTabIndex);
}
@override
void dispose() {
_tabController.removeListener(_handleTabIndex);
_tabController.dispose();
super.dispose();
}
void _handleTabIndex() {
setState(() {});
}
@override
Widget build(BuildContext context) {
return SafeArea(
top: false,
child: Scaffold(
appBar: AppBar(
title: Text('Demo'),
bottom: TabBar(
controller: _tabController,
tabs: [
Tab(
text: "Tab1",
),
Tab(
text: "Tab2",
),
],
),
), // floatingActionButton: _buildFloatingActionButton(context),
body: TabBarView(controller: _tabController, children: [
Center(
child: Container(
child: Text('Tab 1'),
),
),
Center(
child: Container(
child: Text('Tab 2'),
),
),
]),
floatingActionButton: _bottomButtons(),
),
);
}
Widget _bottomButtons() {
return _tabController.index == 0
? FloatingActionButton(
shape: StadiumBorder(),
onPressed: null,
backgroundColor: Colors.redAccent,
child: Icon(
Icons.message,
size: 20.0,
))
: FloatingActionButton(
shape: StadiumBorder(),
onPressed: null,
backgroundColor: Colors.redAccent,
child: Icon(
Icons.edit,
size: 20.0,
),
);
}
}
推荐阅读
- flutter - 使用 AndrodX 创建新的 Flutter 应用程序时出错
- php - 如何检查存储过程是否正常工作并且没有任何错误?
- laravel-5 - 如何通过控制器存储方法将数据存储在表中?我在一个迁移文件中有两个表
- javascript - 如何在Typescript Angular中获取鼠标移动xy坐标的十进制值?
- c++ - Should methods returning const std::string& return const std::string_view instead?
- arrays - 数组元素上的 ReactJS onClick 事件
- typescript - 如何让 Typescript 识别我的自定义全局过滤器?
- tensorflow-federated - 拥有 keras tff NN 模型时访问客户端丢失
- postgresql - 在 PostgreSQL 中从没有时区的时间戳中提取 EPOCH 值
- elasticsearch - 如何让 filebeat 忽略某些容器日志