Flutter Layout：-如何构建此布局

2024-05-02 • 问答

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

Flutter Layout：-如何构建此布局

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 Layout：-如何构建此布局

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

Flutter Layout：-如何构建此布局

gaoyu5945 回答：Flutter Layout：-如何构建此布局

大家都在问