Question

我想在下图中做出类似的事情：上面有两个文本的图片。

我的第一种方法是创建一个容器，该容器的内部有一个堆栈，并且两个文本都位于该堆栈中；和另一个带有图片和文本的Stack，但是我遇到了必须给包装文本的Container设置大小的问题。尽管它可以那样工作，但是由于响应性原因，它对我来说不是最佳解决方案。

有什么方法可以将Stack与Container封装在一起，并根据Stack的内容调整Container的大小？还是有一种更好的方法来实现我的目标？提前致谢。（对不起，我的英语）。

Answer 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,
          ),
        ),
      ),
    );
  }

Answer 2

在您的堆栈中：

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
    ),
  ],
),

Answer 3

您还可以使用double.maxFinite属性设置高度和宽度以匹配parent，如下所示

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

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

检查一次

颤动使容器尺寸适合堆叠尺寸

3 个答案: