如何更改容器在堆栈中的位置？答案

【问题标题】：How to change position of Container inside Stack?如何更改容器在堆栈中的位置？
【发布时间】：2021-07-21 06:40:20
【问题描述】：

我试图在我的堆栈中显示一个按钮，但它没有得到正确的位置。该按钮是回复按钮。我添加了一只脚，现在你可以检查它我想要的是在底部窗口的右侧显示它，底部和按钮之间有一点间距。希望任何人都可以提供帮助。如果您需要更多信息，请发表评论。

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    try {
      return Scaffold(
        body: StreamBuilder(
            stream: mystreamofallvideos,
            builder: (context, snapshot) {
              if (snapshot.hasData &&
                  snapshot.connectionState != ConnectionState.waiting) {
                return PageView.builder(
                    itemCount: snapshot.data.docs.length,
                    controller:
                        PageController(initialPage: 0, viewportFraction: 1),
                    scrollDirection: Axis.vertical,
                    itemBuilder: (context, index) {
                      DocumentSnapshot videos = snapshot.data.docs[index];

                      return Stack(children: [
                        Videoplayeritem(widget.videoid),

                        Column(children: [
                          Align(
                            alignment: Alignment.bottomLeft,
                            child: Container(
                              height: 100,
                              child: Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                mainAxisSize: MainAxisSize.max,
                                children: [
                                  IconButton(
                                      icon: Icon(
                                        Icons.close,
                                        color: Colors.white,
                                        size: 35,
                                      ),
                                      onPressed: () {
                                        Navigator.of(context).pop();
                                      }),
                                  SizedBox(
                                    width: 190,
                                  ),
                                ],
                              ),
                            ),
                          ),
                          Container(
                            color: Colors.red,
                            width: 210,
                            height: 94,
                            //color: Colors.blue.withOpacity(0.5),

                            child: InkWell(
                              onTap: () => sharevideo(
                                  widget.videoid, videos.data()['id']),
                              child: Icon(Icons.reply,
                                  size: 55, color: Colors.white),
                            ),
                          ),
                        ]),

                        //starssonthe right
                      ]);
                    });
              } else {
                return Center(child: CircularProgressIndicator());
              }
            }),
      );
    } catch (e) {
      e.toString();
    }
  }
}

这就是它的样子

enter image description here

【问题讨论】：

标签： flutter dart stack containers material-design

【解决方案1】：

将其包装成一个对齐并在底部添加一个填充：

Align(
  alignment: Alignment.bottomRight,
  child: Container(
  height: 40,
  padding: const EdgeInsets.only(bottom: 16),
  child: OutlinedButton(
           onPressed: () {},
           child: Text('mybutton'),
           ),
 )

【讨论】：

这不起作用，它仍然向我显示相同高度的容器。图标的位置刚刚更改为容器内的右下角。所以容器应该在小部件的右下角
因此您将直接放入堆栈的小部件包装起来。
当我这样做时，什么都没有发生 Itried 在每个地方都没有工作
你需要更好地组织你的代码，它应该可以工作。
您可以检查我的代码更新，这就是它现在丢失的方式，我还尝试用 align 包装柱子，但它不起作用

【解决方案2】：

您可以使用 Positioned 或 Align 小部件包装您的容器

喜欢：

Positioned(
                top: 0.0,
                left: 0.0,
                child: Icon(Icons.message,
                    size: 128.0, color: Colors.greenAccent[400]), //Icon
              ),

【讨论】：

但在不同设备上的定位会相同吗？我不会得到溢出错误吗？
您可以使用媒体查询来确定相对于屏幕尺寸的偏移量