将浮动操作按钮锚定到卡片

Question

创建卡片时（例如使用Docs 中的代码），如何将 FAB 锚定到卡片（下图中的绿色圆圈），就像Android 的这个问题一样。

我看到了一个类似的问题，将 FAB 附加到 AppBar，但解决方案依赖于 AppBar 的固定高度。使用卡片时，高度不是提前固定的，因此不能使用相同的解决方案。

Answer 1

您可以将FloatingActionButton放在Align小部件中并使用该heightFactor属性。

例如：

class MyCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: <Widget>[
          SizedBox(height: 100.0, width: double.infinity),
          Align(
            alignment: Alignment(0.8, -1.0),
            heightFactor: 0.5,
            child: FloatingActionButton(
              onPressed: null,
              child: Icon(Icons.add),
            ),
          )
        ],
      ),
    );
  }
}