Question

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

我看到了similar question用于将FAB附加到AppBar，但是解决方案依赖于AppBar为固定高度。使用Card时，高度不会预先确定，因此无法使用相同的解决方案。

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

Answer 2

正确的解决方案是使用如下所示的“堆栈”和“定位”：

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

Answer 3

针对锚定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 个答案: