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

【问题标题】：Anchor floating action button to Card将浮动操作按钮锚定到卡片
【发布时间】：2019-01-12 22:38:24
【问题描述】：

创建卡片时（例如使用code from the Docs），如何将FAB 锚定到卡片上（下图中的绿色圆圈），例如question for Android。

我看到similar question 用于将 FAB 附加到 AppBar，但解决方案依赖于 AppBar 是固定高度。使用卡片时，高度未提前固定，因此无法使用相同的解决方案。

【问题讨论】：

【解决方案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),
            ),
          )
        ],
      ),
    );
  }
}

【讨论】：

【解决方案2】：

锚 FAB 的正确解决方案。

另一种使用堆栈和容器的解决方案。 FAB 的位置基于其兄弟 Container 小部件的大小和点击/点击是否正常工作。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(bottom: 28),
            child: Container(
              width: double.infinity,
              height: 150,
              color: Color.fromRGBO(55, 55, 55, 0.2),
              padding: EdgeInsets.all(15),
              child: Text(
                  'Any container with bottom padding with half size of the FAB'),
            ),
          ),
          Positioned(
            bottom: 0,
            right: 10,
            child: FloatingActionButton(
              child: Icon(
                Icons.play_arrow,
                size: 40,
              ),
              onPressed: () => print('Button pressed!'),
            ),
          ),
        ],
      ),
    );
  }
}

CodePan link for anchor FAB

【讨论】：

【解决方案3】：

正确的解决方案是使用“Stack”和“Positioned”，如下所示：

return Stack(
      children: <Widget>[
        Card(
          color: Color(0xFF1D3241),
          margin: EdgeInsets.only(bottom: 40), // margin bottom to allow place the button
          child: Column(children: <Widget>[
          ...
          ],
        ),
        Positioned(
          bottom: 0,
          right: 17,
          width: 80,
          height: 80,
          child: FloatingActionButton(
            backgroundColor: Color(0xFFF2638E),
            child: Icon(Icons.play_arrow,size: 70,)
          ),
        ),
      ],
    );

【讨论】：