Flutter布局:-如何构建此布局

问题描述 投票:1回答:1

我想将文本对齐图像内的中心,如图所示。我最近开始使用Flutter,请帮助我实现布局。“布局”

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

借助以上代码,文本显示在底部中心而不是中心。“布局”

flutter flutter-layout
1个回答
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),
          )
        ],
      ),
    );
© www.soinside.com 2019 - 2024. All rights reserved.