[英]How to Make Two Floating Action Button in Flutter?
使用一个浮动操作按钮创建了计数器应用程序。
如果我想再添加一个按钮来重置计数器,我在哪里可以在底部栏添加第二个浮动操作按钮?
另外我必须在 void 部分添加任何方法,或者是否有任何重置计数器功能可用?
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Counter App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Counter App'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Text('You have pressed the button $_counter times.'),
),
bottomNavigationBar: BottomAppBar(
child: Container(
height: 50.0,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => setState(() {
_counter++;
}),
tooltip: 'Increment Counter',
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
}
}
Scaffold
小部件上的floatingActionButton
属性不一定需要采用FloatingActionButton
小部件。 它还可以采用Column
或Row
小部件。
下面,我将分享我的 Scaffold 小部件示例,其中两个浮动操作按钮相互叠加。
return Scaffold(
appBar: AppBar(
title: Text(""),
),
body: SingleChildScrollView(/*...*/),
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
child: Icon(
Icons.delete
),
onPressed: () {
//...
},
heroTag: null,
),
SizedBox(
height: 10,
),
FloatingActionButton(
child: Icon(
Icons.star
),
onPressed: () => _someFunc(),
heroTag: null,
)
]
)
);
您可以使用flutter_speed_dial包: https ://pub.dartlang.org/packages/flutter_speed_dial
在上面的链接上有一个示例显示如何使用它。 您必须使用SpeedDial
类,并且在children[]
上您可以使用SpeedDialChild
添加一些按钮。 下面的示例显示了 2 个 FAB。
使用它的示例:
Widget _getFAB() {
return SpeedDial(
animatedIcon: AnimatedIcons.menu_close,
animatedIconTheme: IconThemeData(size: 22),
backgroundColor: Color(0xFF801E48),
visible: true,
curve: Curves.bounceIn,
children: [
// FAB 1
SpeedDialChild(
child: Icon(Icons.assignment_turned_in),
backgroundColor: Color(0xFF801E48),
onTap: () { /* do anything */ },
label: 'Button 1',
labelStyle: TextStyle(
fontWeight: FontWeight.w500,
color: Colors.white,
fontSize: 16.0),
labelBackgroundColor: Color(0xFF801E48)),
// FAB 2
SpeedDialChild(
child: Icon(Icons.assignment_turned_in),
backgroundColor: Color(0xFF801E48),
onTap: () {
setState(() {
_counter = 0;
});
},
label: 'Button 2',
labelStyle: TextStyle(
fontWeight: FontWeight.w500,
color: Colors.white,
fontSize: 16.0),
labelBackgroundColor: Color(0xFF801E48))
],
);
}
结果:
根据中邮
您可以使用 Column(用于垂直对齐)或 Row 小部件(用于水平对齐)与 2 FAB 作为子级,只需将 hero Tag 设置为 null 或分配不同的 HeroTags。
您可以通过设置“heroTag:null”来实现,如下所示:
Stack(
children: <Widget>[
Align(
alignment: Alignment.bottomLeft,
child: FloatingActionButton(
heroTag: null,
...),
),
Align(
alignment: Alignment.bottomRight,
child: FloatingActionButton(
heroTag: null,
...),
),
],
)
我对此进行了修复,还可以在按钮之间添加空间,您可以添加宽度,并且“英雄”标签非常重要。
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, floatingActionButton: Padding( padding: const EdgeInsets.all(8.0), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ FloatingActionButton( backgroundColor: Colors.green, heroTag: "btn", onPressed: () => _speak(textEditingController.text), child: Icon(Icons.play_arrow), ), SizedBox( width: 40, ), FloatingActionButton( backgroundColor: Colors.red, heroTag: "btn2", onPressed: () => _stop(), child: Icon(Icons.stop), ) ], ), )
是的,它的工作..!
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
onPressed: () => {},
child: Icon(Icons.navigate_before_rounded),
heroTag: "fab1",
),
FloatingActionButton(
onPressed: () => {},
child: Icon(Icons.navigate_next_rounded),
heroTag: "fab2",
),
]
)
在 Flutter 文档中,我们最多可以在单个屏幕上使用一个浮动操作按钮。 我们可以使用 RawMaterialButton() 小部件来做到这一点。 浮动操作按钮的这个小部件父小部件
是这样的
class RoundIconButton extends StatelessWidget { const RoundIconButton({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return RawMaterialButton( constraints: BoxConstraints(minHeight: 40, minWidth: 40), shape: CircleBorder(), fillColor: Colors.white, onPressed: () {}, child: Text("+"), ); } } class Fab extends StatelessWidget { const Fab({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Column( children: [ RawMaterialButton(), RawMaterialButton(), ], ); } }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.