来自顶部（）的图像和图像下方带有文本的框答案

【问题标题】：image from top() and box with text below the image来自顶部（）的图像和图像下方带有文本的框
【发布时间】：2020-09-10 05:12:33
【问题描述】：

我需要做一些类似于所附图片的事情

这是我尝试过的：

Container(
    height: 300.0,
    decoration: BoxDecoration(
        image: DecorationImage(
          fit: BoxFit.fitWidth,
          alignment: FractionalOffset.center,
          image: CachedNetworkImageProvider(image_url),
        )
    ),
    alignment: Alignment.bottomCenter,
    child: Container(
        margin: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
        width: MediaQuery.of(context).size.width * 0.92,
        child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: AutoSizeText(
                my_text,
                style: TextStyle(fontSize: 19),
                maxLines: 1,
                textAlign: TextAlign.center
            )
        ),
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.8),
              spreadRadius: 1,
              blurRadius: 3,
              offset: Offset(1, 1),
            ),
          ],
        )
    )
)

这段代码的问题是：

如果图像不够高，应用栏和图像之间的屏幕顶部会出现一个白条
文本框的位置取决于容器的高度：我需要框总是一半在图像内部，一半在图像之外

【问题讨论】：

这可以通过使用 Stack 小部件来实现。看看这个：youtube.com/watch?v=liEGSeD3Zt8

标签： flutter dart

【解决方案1】：

您必须为此使用堆栈小部件，但请确保您使用 BoxFit 并作为 Cover，它将填满容器的整个高度。

Stack(
        alignment: Alignment.topCenter,
        children: <Widget>[
          Container(
            height: 300.0,
            decoration: BoxDecoration(
                image: DecorationImage(
              fit: BoxFit.cover,
              alignment: FractionalOffset.center,
              image: AssetImage('assets/images/image.jpg'),
            )),
          ),
          Container(
            margin: EdgeInsets.only(top: 280),
            width: MediaQuery.of(context).size.width * 0.92,
            child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text("jitesh",
                    style: TextStyle(fontSize: 19),
                    maxLines: 1,
                    textAlign: TextAlign.center)),
            decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.8),
                  spreadRadius: 1,
                  blurRadius: 3,
                  offset: Offset(1, 1),
                ),
              ],
            ),
          )
        ],
      ),

【讨论】：