Flutter 布局：- 如何构建此布局答案

【问题标题】：Flutter Layout :- how to build this layoutFlutter 布局：- 如何构建此布局
【发布时间】：2019-11-05 10:44:17
【问题描述】：

我想将文本与图像内的中心对齐，如图所示。我最近开始使用颤振，请帮助我实现布局。

Container(
            width: MediaQuery.of(context).size.width,
            margin: EdgeInsets.fromLTRB(24, 20, 24, 0),
            child: Stack(
              children: <Widget>[
                ClipRRect(
                  borderRadius: BorderRadius.circular(16.0),
                  child: Image.asset(
                    'assets/images/car.jpg',
                    fit: BoxFit.cover,
                  ),
                ),
                Positioned.fill(
                  child: Align(
                    alignment: Alignment.center,
                    child: Text(
                      'Cars',
                      style: TextStyle(
                          fontFamily: 'Welcome',
                          fontSize: 30,
                          color: Colors.white),
                    ),
                  ),
                )
              ],
            ),
          )

在上述代码的帮助下，文本出现在底部中心而不是中心。

【问题讨论】：

您的图片链接已损坏。 @Atul Chaudhary
@tyb9900 只需将链接更改为以前损坏的图像链接
你想让文字在图片的中心吗？
@tyb9900 是的，就像第一张图片

标签： flutter flutter-layout

【解决方案1】：

    return Container(
      width: MediaQuery
          .of(context)
          .size
          .width,
      margin: EdgeInsets.fromLTRB(24, 20, 24, 0),
      child: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          ClipRRect(
            borderRadius: BorderRadius.circular(16.0),
            child: Image.asset(
              Images.image1,
              fit: BoxFit.cover,
            ),
          ),
          Text(
            'Cars',
            style: TextStyle(
                fontFamily: 'Welcome',
                fontSize: 30,
                color: Colors.white),
          )
        ],
      ),
    );

【讨论】：