Flutter小技巧总结之r图片即使设置了fit: BoxFit.cover不满屏的坑

一,问题场景:  

  在轮播图的时候由于要加一个立即体验的按钮,所以使用了Stack下面包含Container和Align,发现即使Image.asset中设置了fit: BoxFit.cover,一直不满屏,

二,解决办法:

  在Image.asset增加

  • width: double.infinity
  • height: double.infinity

  这两个属性才可以满屏显示。

三,示例demo

body: new Center(
        child: Stack(
          children: <Widget>[
            Container(
              color: Colors.red,
              child:Image.asset(guideImageAssets[i],
              fit: BoxFit.cover,
              width: double.infinity,
              height: double.infinity,
             ),   
           ),

            Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                margin: EdgeInsets.only(bottom: 70),
                child: RaisedButton(
                  onPressed: (){

                  },
                  child: Text('理解体验',style:TextStyle(color: Colors.white)),
                  color: Colors.deepOrange,
                  textColor: Colors.white,
                ),
              ),
            )
          ],
        )

 

posted on 2019-08-01 00:08  梁飞宇  阅读(1243)  评论(0)    收藏  举报