[英]Placement of Floating Action Button in 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: () {},
);
}
}
请帮我解决我应该如何放置我的浮动操作按钮提前谢谢你:)
添加侦听器以更新当前选定的选项卡以显示 FloatingActionButton 或空 Container。
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属性:
您可以使用此代码。 我制作了 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: () {}, ); } }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.