Question

如果紫色区域位于扩展小部件内，我该如何定位按钮？我已经通过将紫色容器设置为固定高度来实现该UI，但是如果高度可变（取决于内容），我将无法理解如何实现相同的效果。

我可以通过使用Stack和Positioned窗口小部件来关闭窗口，但该按钮实际上并不是可单击的。如果有人能给我关于如何实现预期目标的总体思路，我将不胜感激。

这是我的尝试（演示案例）

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(
          flex: 1,
          child: SingleChildScrollView(
              child: Column(
                children: <Widget>[
                  Container(
                    decoration: BoxDecoration(
                      color: Colors.redAccent,
                    ),
                    child: Padding(
                      padding: const EdgeInsets.all(20.0),
                      child: Stack(
                          children: <Widget> [
                            Padding(
                              padding: const EdgeInsets.only(bottom: 40.0),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  Icon(
                                      Icons.book,
                                      color: Colors.white,
                                      size: 40.0
                                  ),
                                  Container(
                                    width: 90.0,
                                    child: new Divider(color: Colors.white),
                                  ),
                                  Text(
                                    "Some random text -",
                                    style: TextStyle(color: Colors.white, fontSize: 25.0),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.only(top: 8.0, right: 70.0),
                                    child: Row(
                                      children: <Widget>[
                                        Flexible(
                                          child: Text(
                                            'More random text that can vary a lot!',
                                            style: TextStyle(
                                              color: Colors.white,
                                              fontSize: 16.0,
                                              fontWeight: FontWeight.bold,
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.only(top: 8.0),
                                    child: Row(
                                      children: <Widget>[
                                        Text(
                                          'Random text ',
                                          style: TextStyle(
                                            color: Colors.white,
                                            fontSize: 16.0,
                                            fontWeight: FontWeight.bold,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.only(top: 8.0),
                                    child: Row(
                                      children: <Widget>[
                                        Text(
                                          'Random',
                                          style: TextStyle(
                                            color: Colors.white,
                                            fontSize: 16.0,
                                            fontWeight: FontWeight.bold,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            Positioned(
                              bottom: 0.0,
                              left: MediaQuery.of(context).size.width - 100.0,
                              child: FractionalTranslation(
                                translation: const Offset(0.0, 0.8),
                                child: FloatingActionButton(
                                  backgroundColor: Colors.white,
                                  foregroundColor: Colors.redAccent,
                                  child: new Icon(
                                      Icons.map
                                  ),
                                  onPressed: () {

                                  },
                                ),
                              ),
                            ),
                          ]
                      ),
                    ),
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(top: 8.0, left: 8.0),
                        child: Row(
                          children: <Widget>[
                            Flexible(
                              child: Text(
                                  "Random text",
                                  style: new TextStyle(
                                      fontFamily: 'Raleway',
                                      fontSize: 16.0,
                                      color: Colors.black38
                                  )
                              ),
                            ),
                          ],
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                            "Random text - long text",
                            style: new TextStyle(
                                fontFamily: 'Raleway',
                                fontSize: 18.0
                            )
                        ),
                      ),
                    ],
                  )
                ],
              )
          ),
        ),
      ],
    );

Answer 1

解释我在评论中所描述的内容：

您可以使用FractionalTranslation小部件将FAB向下移动一半。

FractionalTranslation(translation: Offset(0, .5), child: FloatingActionButton(...))

这要求您事先将其放置在紫色区域的底部（请参阅您的屏幕截图），但是我认为您已经搞清楚了。

Flutter：如何在2个容器的中间放置一个按钮？

1 个答案: