dart 如何在Flutter中制作两个浮动动作按钮？

bbuxkriu 于 2024-01-03 发布在 Flutter

关注(0)|答案(7)|浏览(239)

我创建了一个带有一个浮动操作按钮的计数器应用程序。
如果我想再添加一个按钮来重置计数器，我可以在底部栏的哪里添加第二个浮动操作按钮？
另外，我必须在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,
    );
  }
}

字符串

dart

来源：https://stackoverflow.com/questions/55166999/how-to-make-two-floating-action-button-in-flutter

7条答案

按热度按时间

bttbmeg01#

Scaffold widget上的floatingActionButton属性不一定需要接受FloatingActionButton widget。它也可以接受Column或Row widget。
下面，我将分享我的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,
      )
    ]
  )
);

字符串

展开查看全部

赞(0）回复(0）举报 2024-01-03

llycmphe2#

您可以使用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))
          ],
        );
  }

字符串

结果：

的数据

展开查看全部

赞(0）回复(0）举报 2024-01-03

ha5z0ras3#

是的，它的工作..！

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",
          ),
        ]
      )

字符串
x1c 0d1x的数据

展开查看全部

赞(0）回复(0）举报 2024-01-03

inkz8wg94#

根据medium post
您可以使用列（垂直对齐）或行部件（水平对齐）与2 FAB作为孩子，只是设置英雄标签空或分配不同的英雄标签。

赞(0）回复(0）举报 2024-01-03

z0qdvdin5#

您可以通过设置“heroTag：null”来设置它，如下所示：

Stack(
  children: <Widget>[
    Align(
      alignment: Alignment.bottomLeft,
      child: FloatingActionButton(
                heroTag: null,
             ...),
    ),
    Align(
      alignment: Alignment.bottomRight,
      child: FloatingActionButton(
                heroTag: null,
             ...),
    ),
  ],
)

字符串

展开查看全部

赞(0）回复(0）举报 2024-01-03

guykilcj6#

我用这个修复了它，也可以在按钮之间添加空间，你可以添加一个宽度和“英雄”标签是非常重要的。

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),
              )
            ],
          ),
        )

字符串
enter image description here

展开查看全部

赞(0）回复(0）举报 2024-01-03

plupiseo7#

在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(),
      ],
    );
  }
}

字符串

展开查看全部

赞(0）回复(0）举报 2024-01-03

我来回答

dart 如何在Flutter中制作两个浮动动作按钮？

7条答案

相关问题

热门标签

最新问答