如何根据内容使容器响应式颤动答案

【问题标题】：How to make container responsive in flutter based on the content如何根据内容使容器响应式颤动
【发布时间】：2022-07-21 16:52:23
【问题描述】：

我只想在文本和上面概述的按钮之间留一个空格。当我设置空间时，它在不同的移动设备中显示不同。现在按钮未完整显示。如何完全显示所有内容并在按钮和文本之间留出空间。这在所有设备上都应该相同。

按钮应该在容器而不是文本之上。按钮应该在底部是这样的。它在容器上方。 [![在此处输入图片描述][3]][3]

【问题讨论】：

您应该使用行小部件，而不是使用定位。
我已经用图片更新了问题。请检查一下

标签： flutter dart

【解决方案1】：

我鼓励使用padding 而不是margin。

还有一些其他的改动，在代码注释中有描述

class RetreatWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // SizeConfig().init(context);
    return Scaffold(
      appBar: AppBar(),
      body: LayoutBuilder(
        builder: (context, constraints) => Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // if you need padding, wrap this Container with Padding widget
            Container(
              height: 110 + 48, // custom height 100 comes from ListItem height
              width: constraints.maxWidth,
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(20),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey.withOpacity(0.5), //color of shadow
                      spreadRadius: 5, //spread radius
                      blurRadius: 7, // blur radius
                      offset: Offset(0, 2), // changes position of shadow
                    ),
                  ]),
              child: Stack(
                children: [
                  SizedBox(
                    height: 110, // from [RetreatItem()]
                    child: ListView(
                      scrollDirection: Axis.horizontal,
                      physics: AlwaysScrollableScrollPhysics(),
                      shrinkWrap: true,
                      children: [
                        RetreatItem(),
                        RetreatItem(),
                        RetreatItem(),
                      ],
                    ),
                  ),
                  Positioned(
                    bottom: 0,
                    left: 0,
                    right: 0,
                    child: OutlinedButton(
                      style: OutlinedButton.styleFrom(
                          backgroundColor: Colors.white,
                          padding: EdgeInsets.zero,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(20),
                          ),
                          side: BorderSide(
                            width: 1.0,
                            color: Colors.blue,
                          )),
                      onPressed: () {},
                      child: Text(
                        'Read More +',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Colors.blue,
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class RetreatItem extends StatelessWidget {
  const RetreatItem({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8),
      width: 200,
      height: 100,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
            child: Image.network(
              'https://cdn.pixabay.com/photo/2022/03/03/13/00/heart-7045303_960_720.jpg',
              // width: 200, // from parent
              fit: BoxFit.fitWidth, // for better view
            ),
          ),
          Text(
            "garden - APRIL-2022",
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }
}

【讨论】：

感谢您的回答。我已经用附加图片更新了这个问题。按钮应该在容器上方。图片已给出
你能检查更新答案吗
上面的代码有一个简单的问题。按钮在容器内。所以我在 Positioned 小部件的底部添加了一个 -6 值，然后它就可以工作了。但我不知道它是否对所有屏幕设备都有响应。
您可以通过更改大小在网络上进行测试。
好的。实际上，我并不是只为移动设备制作网络（不同的屏幕尺寸）。无论如何感谢您的回答。

【解决方案2】：

您可以使用 mediaquery 给出高度和宽度。并在按钮和容器之间添加大小框。您可以将此行替换为 constraints.maxHeight，

height Mediaquery.of(context).size.height*0.1

【讨论】：

你能用代码给我看看吗？没看懂