将FloatingActionButton定位在左侧

Question

我该如何将FloatingActionButton放置在Scaffold内的左侧？目前，唯一可用的选项是centerFloat, centerDocked, endFloat和endDocked。也许Material Design不打算将FAB定位在startFloat或startDocked。如果RTL将endFloat和endDocked更改为出现在左侧，那就没问题了，但事实并非如此。

- creativecreatorormaybenot

---

你需要自己编写fab。Material Design非常挑剔，为了保持一致的用户界面，他们不希望在右侧使用fabs。 - blaneyneil

Answer 1

在2020年4月，可用选项已扩展，现在包括startFloat和startDocked选项。

以下是可用选项的完整列表（请参阅FloatingActionButtonLocation文档）：

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

---

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

- creativecreatorormaybenot

Answer 2

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

floatingActionButtonLocation: FloatingActionButtonLocation.startFloat

可以从material.dart传递给Scaffold Widget的参数

来源：PR 51465

- Anirudh

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

- Payam Asefi