将 FloatingActionButton 定位在左侧

Question

如何将FloatingActionButton 定位在Scaffold 内的左侧？
目前唯一可用的选项是centerFloat、centerDocked、endFloat 和endDocked。

也许Material Design不打算将FAB定位在startFloat或startDocked。
如果 RTL 将 endFloat 和 endDocked 更改为出现在左侧就好了，但事实并非如此。

Answer 1

In April 2020，可用选项已扩展，现在包含startFloat 和startDocked 选项。

这里是可用选项的完整列表（请参阅FloatingActionButtonLocation documentation）：

• centerDocked
• centerFloat
• centerTop
• endDocked
• endFloat
• endTop
• miniCenterDocked
• miniCenterFloat
• miniCenterTop
• miniEndDocked
• miniEndFloat
• miniEndTop
• miniStartDocked
• miniStartFloat
• miniStartTop
• startDocked
• startFloat
• startTop

---

您甚至可以使用StandardFabLocation 轻松定义自己的位置。

Answer 2

截至 2020 年，您可以使用以下内容：

floatingActionButtonLocation: FloatingActionButtonLocation.startFloat

可以从 material.dart

传递给 Scaffold Widget 的参数

来源：公关51465

Answer 3

这个问题还有另一种解决方案。默认情况下，Fab 按钮始终位于屏幕的底部。因此，如果我们用Directionality 包装我们的Scaffold 并将其文本方向设置为TextDirection.rtl，那么按钮会向左移动。但是由于现在身体本身是镜像的，我们可以用另一个Directionality包裹身体并将其文本方向设置为TextDirection.ltr

  @override
  Widget build(BuildContext context) {
    return 
      Directionality(
      textDirection: TextDirection.rtl,
      child:Scaffold(
      appBar: AppBar(
        title: const Text('Something),
      ),
      body: Directionality(
        textDirection: TextDirection.ltr,
        child: Center(child: const Text('Press the button below!'))),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          
        },
        child: Icon(Icons.navigation),
        backgroundColor: Colors.green,
      ),
    )
      );
  }