颤振使容器大小适合堆栈大小答案

【问题标题】：Flutter make container size fit stack size颤振使容器大小适合堆栈大小
【发布时间】：2020-09-02 01:10:46
【问题描述】：

我想做如下图所示的东西：一张上面有两个文字的图片。

我的第一种方法是创建一个容器，里面有一个堆栈，两个文本都在堆栈内；和另一个带有图片和文本的堆栈，但我遇到了必须为用文本包装堆栈的容器指定大小的问题。尽管它以这种方式工作，但由于响应性原因，它对我来说不是最佳解决方案。

有没有办法用容器包装堆栈并让容器的大小来自堆栈的内容？或者有没有更好的方法来实现我正在寻找的东西？提前致谢。（对不起我的英语）。

【问题讨论】：

如果任何解决方案对您有用，请点赞并接受有用的答案，它将对未来的用户有所帮助

标签： flutter flutter-layout

【解决方案1】：

您可以使用 Shadow 属性来实现此布局。

以下代码将为您提供更多帮助。

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: double.infinity,
          height: 300,
          decoration: BoxDecoration(
            image: DecorationImage(
                image: NetworkImage(
                    'https://miro.medium.com/max/1400/1*U-R58ahr5dtAvtSLGK2wXg.png'),
                fit: BoxFit.cover),
          ),
          child: Text(
            " Hello world",
            style: TextStyle(
              fontSize: 50,
              color: Colors.white,
              shadows: [
                Shadow(
                  color: Colors.amber,
                  offset: Offset(-30.0, -30.0),
                  blurRadius: 1.0,
                ),
              ],
            ),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }

【讨论】：

【解决方案2】：

您也可以使用double.maxFinite 属性来设置高度和宽度以匹配父级，如下所示

  Stack(
          children: <Widget>[
            Container(
              height: double.maxFinite,
               width: double.maxFinite,
               child:
                  Image.asset('YOOUR_ASSEST_IMAGE_HERE', fit: BoxFit.fill),
              ),
            ]
          )

并使用你的堆栈检查我的另一个解决方案，请检查一次https://stackoverflow.com/a/58029364/3946958

【讨论】：

【解决方案3】：

在您的堆栈中：

Stack(
  children: <Widget> [
    Image(...), // Your Image here
    Positioned.fill( // Expands to the size of your image
      child: ..., // Put your Text widgets here in a Stack/Any other way you deem fit
    ),
  ],
),

【讨论】：

我不知道 Positioned.fill 非常感谢
这是最好的解决方案，必须接受。