Flutter中浮动操作按钮的放置
我正在制作这样的屏幕视图。我想要的是，当它在药物选项卡上时，它应该在角落显示一个浮动操作按钮，如图所示。
对于历史选项卡，它应该消失。就像这张照片
我的代码是：
import 'package:epicare/HomeScreen.dart';
import 'package:flutter/material.dart';
class Medicines extends StatefulWidget {
@override
_MedicinesState createState() => _MedicinesState();
}
class _MedicinesState extends State<Medicines> with TickerProviderStateMixin {
TabController _tabController;
@override
void initState() {
_tabController = TabController(length: 2, vsync: this);
super.initState();
}
@override
void dispose() {
super.dispose();
_tabController.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: const Color(0xffE5E0A1),
elevation: 0,
centerTitle: true,
title: Text(
"Medicine",
style: TextStyle(
fontSize: 15.0,
color: Colors.black,
fontFamily: 'Montserrat',
fontWeight: FontWeight.normal,
),
),
leading: IconButton(
icon: Icon(
Icons.arrow_back,
color: Colors.black,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return HomeScreen();
},
),
);
},
),
),
body: Padding(
padding: const EdgeInsets.only(top: 32,right: 32,left: 32),
child: Column(
children: [
// give the tab bar a height [can change height to preferred height]
Container(
height: 45,
decoration: BoxDecoration(
color: const Color(0xffE5E0A1),
borderRadius: BorderRadius.circular(
17.0,
),
border: Border.all(
width: 1.0, color: const Color(0xff2f363d)),
),
child: TabBar(
controller: _tabController,
// give the indicator a decoration (color and border radius)
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(
17.0,
),
color: Colors.black,
),
labelColor: const Color(0xffd4d411),
unselectedLabelColor: Colors.black,
tabs: [
// first tab [you can add an icon using the icon property]
Tab(
child: Text(
'Medicine',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 16,
//color: const Color(0xffd4d411),
letterSpacing: 0.48,
),
textAlign: TextAlign.left,
),
),
// second tab [you can add an icon using the icon property]
Tab(
child: Text(
'History',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 16,
//color: const Color(0xffd4d411),
letterSpacing: 0.48,
),
textAlign: TextAlign.left,
),
),
],
),
),
// tab bar view her
Expanded(
child: TabBarView(
controller: _tabController,
children: [
// first tab bar view widget
Column(
children: [
Image.asset(("assets/images/Medicine-amico.png")),
SizedBox(
height: 20,
),
Text(
'Hurray! You don\'t have any pending medicines to take!',
style: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.w600,
fontSize: 14,
color: const Color(0x78000000),
height: 1.4285714285714286,
),
textAlign: TextAlign.center,
),
],
),
// second tab bar view widget
Column(
children: [
Image.asset(("assets/images/Time management-pana.png")),
Text(
'You have no data here!\nPlease complete your prescriptions',
style: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.w600,
fontSize: 14,
color: const Color(0x78000000),
height: 1.4285714285714286,
),
textAlign: TextAlign.center,
),
],
),
],
),
),
],
),
),
// floatingActionButton: FloatingActionButton(
// child: Icon(
// Icons.add,
// size: 40,
// ),
// backgroundColor: const Color(0xffd4d411),
// onPressed: () {},
// ),
);
}
Widget addmedicine() {
return FloatingActionButton(
child: Icon(
Icons.add,
size: 40,
),
backgroundColor: const Color(0xffd4d411),
onPressed: () {},
);
}
}
请帮助我如何放置浮动操作按钮 提前谢谢你:)
2 个答案:
答案 0 :(得分：2)
添加一个监听器来更新当前选择的选项卡以显示 FloatingActionButton 或一个空的容器。
class _MedicinesState extends State<Medicines> with TickerProviderStateMixin {
late TabController _tabController;
var _selectedIndex = 0;
@override
void initState() {
super.initState();
_tabController = TabController(length: 2, vsync: this)
..addListener(() {
setState(() {
_selectedIndex = _tabController.index;
});
});
}
@override
void dispose() {
super.dispose();
_tabController.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: ...,
body: ...,
floatingActionButton: _selectedIndex > 0
? Container()
: FloatingActionButton(
child: Icon(
Icons.add,
size: 40,
),
backgroundColor: const Color(0xffd4d411),
onPressed: () {},
),
);
}
}
这种方法保留了 FloatingActionButton 的 hero 属性：
答案 1 :(得分：0)
You can use this code. 我制作了 Stack 小部件并仅在药物页面上添加了浮动按钮 只需在屏幕上复制并粘贴此代码
class Medicines extends StatefulWidget {
@override
_MedicinesState createState() => _MedicinesState();
}
class _MedicinesState extends State<Medicines> with TickerProviderStateMixin {
TabController _tabController;
@override
void initState() {
_tabController = TabController(length: 2, vsync: this);
super.initState();
}
@override
void dispose() {
super.dispose();
_tabController.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: const Color(0xffE5E0A1),
elevation: 0,
centerTitle: true,
title: Text(
"Medicine",
style: TextStyle(
fontSize: 15.0,
color: Colors.black,
fontFamily: 'Montserrat',
fontWeight: FontWeight.normal,
),
),
leading: IconButton(
icon: Icon(
Icons.arrow_back,
color: Colors.black,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return HomeScreen();
},
),
);
},
),
),
body: Padding(
padding: const EdgeInsets.only(top: 32, right: 32, left: 32),
child: Column(
children: [
// give the tab bar a height [can change height to preferred height]
Container(
height: 45,
decoration: BoxDecoration(
color: const Color(0xffE5E0A1),
borderRadius: BorderRadius.circular(
17.0,
),
border: Border.all(width: 1.0, color: const Color(0xff2f363d)),
),
child: TabBar(
controller: _tabController,
// give the indicator a decoration (color and border radius)
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(
17.0,
),
color: Colors.black,
),
labelColor: const Color(0xffd4d411),
unselectedLabelColor: Colors.black,
tabs: [
// first tab [you can add an icon using the icon property]
Tab(
child: Text(
'Medicine',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 16,
//color: const Color(0xffd4d411),
letterSpacing: 0.48,
),
textAlign: TextAlign.left,
),
),
// second tab [you can add an icon using the icon property]
Tab(
child: Text(
'History',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 16,
//color: const Color(0xffd4d411),
letterSpacing: 0.48,
),
textAlign: TextAlign.left,
),
),
],
),
),
// tab bar view her
Expanded(
child: TabBarView(
controller: _tabController,
children: [
// first tab bar view widget
Stack(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(onPressed: null)
]),
]),
),
Column(
children: [
Image.asset(("assets/images/Medicine-amico.png")),
SizedBox(
height: 20,
),
Text(
'Hurray! You don\'t have any pending medicines to take!',
style: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.w600,
fontSize: 14,
color: const Color(0x78000000),
height: 1.4285714285714286,
),
textAlign: TextAlign.center,
),
],
),
],
),
// second tab bar view widget
Column(
children: [
Image.asset(("assets/images/Time management-pana.png")),
Text(
'You have no data here!\nPlease complete your prescriptions',
style: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.w600,
fontSize: 14,
color: const Color(0x78000000),
height: 1.4285714285714286,
),
textAlign: TextAlign.center,
),
],
),
],
),
),
],
),
),
// floatingActionButton: FloatingActionButton(
// child: Icon(
// Icons.add,
// size: 40,
// ),
// backgroundColor: const Color(0xffd4d411),
// onPressed: () {},
// ),
);
}
Widget addmedicine() {
return FloatingActionButton(
child: Icon(
Icons.add,
size: 40,
),
backgroundColor: const Color(0xffd4d411),
onPressed: () {},
);
}
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？