颤振使用堆栈创建 ui。浮动按钮应该在小部件上方答案

【问题标题】：flutter create ui using stack . Floating Button should be over the widget颤振使用堆栈创建 ui。浮动按钮应该在小部件上方
【发布时间】：2018-10-24 16:53:28
【问题描述】：

我正在尝试创建如下图所示的 ui。但按钮隐藏在列表后面。当使用Positioned 小部件作为按钮时，也面临问题按钮不点击。请建议如何使用Stack 小部件和ListView 和Floating button 在下面的UI 中创建。

Container(
  color: Colors.grey,
  child: Column(
    children: <Widget>[
      Stack(
        children: <Widget>[
          Column(
            children: <Widget>[
              Container(
                height: 250.0,
                width: MediaQuery.of(context).size.width,
                child: Image.asset(
                  "images/1.jpg",
                  fit: BoxFit.cover,
                ),
              )
            ],
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: <Widget>[
              Container(
                height: 220.0,
              ),
              Container(
                padding: EdgeInsets.only(right: 15.0),
                child: FloatingActionButton(
                  onPressed: () {},
                  child: Icon(Icons.favorite),
                ),
              ),
            ],
          ),
          Column(
            children: <Widget>[
              Container(
                height: 250.0,
              ),
              Container(
                height: MediaQuery.of(context).size.height - 250.0,
                child: ListView.builder(
                  shrinkWrap: true,
                  itemBuilder: (context, index) {
                    return Card(
                      child: ListTile(
                        title: Text("Title $index"),
                        leading: Icon(Icons.home),
                      ),
                    );
                  },
                  itemCount: 15,
                ),
              ),
            ],
          )
        ],
      ),
    ],
  ),
);

【问题讨论】：

贴出你试过的代码。
@CopsOnRoad 添加。请检查

标签： flutter flutter-layout

【解决方案1】：

根据文档 (https://docs.flutter.io/flutter/widgets/Stack-class.html)：

堆栈按顺序绘制其子级，第一个子级位于底部

所以你的Stack儿童订单是错误的。您当前的订单是：

标题
按钮
列表

但应该是：

标题
列表
按钮

否则列表是重叠按钮。

【讨论】：