logo标签列表

如何更改FloatingActionButton的大小？

flutterdartflutter-layout
113

我想在Flutter中为FloatingActionButton设置一个大小，我想设置width/height，也就是说，让按钮变大，我一直在寻找一个圆形的按钮，但是我找到的唯一一个是这个，所以我开始使用它，但我需要它再大一点。

15个回答
149

将你的FAB用FittedBox包裹在Container或SizedBox中，然后更改它的宽度和高度。

例子：

floatingActionButton: Container(
        height: 100.0,
        width: 100.0,
        child: FittedBox(
          child: FloatingActionButton(onPressed: () {}),
        ),
      ),

在此输入图片描述

3
没有正确或错误的答案，但我个人认为这是“最好”的答案。 - chemamolins
1
这个回答更符合框架的哲学。 - Drowsy
即使没有适配的盒子，该解决方案也能正常工作。 - Ali_Waris
2
没有FittedBox，FAB的子元素不会缩放。但是使用FittedBox一切都正常。这是我找到的最佳解决方案，如果能添加一个适当的“大小”属性就更好了。 - UnicornsOnLSD
无论你缩小哪个属性，它似乎都会定义大小。如果你将高度增加到超过宽度，它不会像你预期的那样变成椭圆形；相反，它会沿着y轴垂直地移动按钮。因此，如果你满意按钮的默认底部位置，你只需要设置它的宽度即可。 - chemturion
85

屏幕截图:

在此输入图片描述

  • 小图 (40 x 40)

    FloatingActionButton.small(
  onPressed: onPressed,
  child: Icon(Icons.edit),
)

  • 常规（56 x 56）

    • FloatingActionButton(
  onPressed: onPressed,
  child: Icon(Icons.edit),
)

  • 大尺寸 (96 x 96)

    • FloatingActionButton.large(
  onPressed: onPressed,
  child: Icon(Icons.edit),
)

  • 扩展的

    • FloatingActionButton.extended(
  onPressed: onPressed,
  label: Text('Extended'),
  icon: Icon(Icons.edit),
)

  • 定制尺寸（A x B）：

    • SizedBox(
  width: 20,
  height: 20,
  child: FittedBox(
    child: FloatingActionButton(
      onPressed: onPressed,
      child: Icon(Icons.edit),
    ),
  ),
)
2
正是我所期望的。谢谢！ - oupoup
63

使用Container，在其中可以指定width和height，然后使用RawMaterialButton，示例如下：

final myFabButton = Container(
  width: 200.0,
  height: 200.0,
  child: new RawMaterialButton(
    shape: new CircleBorder(),
    elevation: 0.0,
    child: Icon(
      Icons.favorite,
      color: Colors.blue,
    ),
    onPressed: () {},
  ),
);
请更新代码，有一个小括号漏了。谢谢。 - Kamlesh
54

你不必重新发明轮子，Flutter团队知道这是必需的。

使用 FloatingActionButton.extended() 而不是常规的 FloatingActionButton()

示例代码：

FloatingActionButton.extended(
  onPressed: () {},
  icon: Icon(Icons.save),
  label: Text("DOWNLOAD"),
),

在此输入图片描述

来源：proandroiddev

1
这不是问题提出者在问题中所问的，请再次仔细阅读问题。 - DaniyalAhmadSE
49

更新

仅使用 SizedBox 似乎无法缩放 FAB 内部的子元素。您需要在两者之间使用 FittedBox。

  floatingActionButton: SizedBox(
    height: 100.0,
    width: 100.0,
    child: FittedBox(
      child: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {},
      ),
    ),
  ),

感谢chemturion的评论。

请查看Raouf Rahiche的答案获取更多细节。

旧回答

使用SizedBox

SizedBox(
  width: 200.0,
  height: 200.0,
  child: FloatingActionButton(
    onPressed: () {},
  ),
)
1
这个甚至可以在有凹口底部导航栏和 floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked 的情况下工作，谢谢！ - Aleksandar
1
我注意到这种方法和容器->FittedBox方法之间的一个区别是，仅使用SizedBox父级时，FAB中的图标不会相应地缩放。 - chemturion
@chemturion 你说得对。已更新答案。赞！ - Amsakanna
14

这里大多数答案使用硬编码的值，但实际上我们必须应用通用解决方案，这些解决方案在所有用户界面中应该是恒定的。

Scaffold(
      floatingActionButton: Container(
        height: MediaQuery.of(context).size.width * 0.2, 
        width: MediaQuery.of(context).size.width * 0.2,
        child: FloatingActionButton(onPressed: () {}),
      ),

使用MediaQuery设置宽度和高度，这将在所有设备上都相同。

输出结果：

输入图像描述

7
你可以使用 Transform.scale() 小部件将你的按钮进行包裹：
  floatingActionButton: Transform.scale(
    scale: 1.5,
    child: FloatingActionButton(onPressed: () {}),
  )
增加比例因子会使按钮从两侧被裁剪。 - anmol.majhail
是的。这种方法不会改变按钮的中心点，因此如果缩放过大，侧面会被切掉。 - chemamolins
1
相比之下，FittedBox 不仅可以缩放，还可以定位子元素。 - chemamolins
1
另一个选项是使用 - CircleAvatar( 半径: 42.0, 子元素: Icon(Icons.add), 它具有半径参数。 - anmol.majhail
Transform.scale 是一种相对昂贵的方法。 - Kirill Karmazin
5
RawMaterialButton(
  elevation: 2.0,
  shape: CircleBorder(),
  fillColor: Colors.red,
  onPressed: (){},
  child: Icon(
    Icons.add,
    color: Colors.white,
    size: 20.0,
  ),
  constraints: BoxConstraints.tightFor(
    width: 56.0,
    height: 56.0,
  ),
)

通过这种方式，您可以添加任何类型的按钮。

1
这是我在一个应用程序中的实现方式：

floatingActionButton: Container(
    height: 100.0,
    width: 100.0,
    child: FittedBox(
      child: FloatingActionButton(
        onPressed: _loadProgress,
        child: Icon(Icons.ac_unit_outlined),
        child: Text(
          'Get Joke!',
          textAlign: TextAlign.center,
          style: TextStyle(fontWeight: FontWeight.w700, fontSize: 10.0),
        ),
      ),
    ),
  ),
1

FloatingActionButton有一个叫做mini的属性，可以设置为true。

floatingActionButton: FloatingActionButton(
    mini: true,
    onPressed: (){

    },
    child: Icon(Icons.play_arrow_outlined),
  ),
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接