Flutter折腾学习成长记(25)

今日目标

今天主要学习flutter里的AspectRatio和Card这两个组件

AspectRatio

AspectRatio的作用是根据设置调整子元素child的宽高比。它首先会在布局限制条件允许的范围内尽可能的扩展，Widget的高度是由宽度和比率决定的，类似于BoxFit中的contain，按照固定比率去尽量沾满区域。如果在满足所有限制条件过后无法找到一个可行的 尺寸，AspectRatio最终将会去优先适应布局限制条件，而忽略设置的比率。

组件属性

属性	说明
aspectRatio	宽高比，最终可能不会根据这个值去布局，具体则要看综合因素，外层是否允许按照这个比率进行布局，只是一个参考值。

class HomeContent extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Container(width: 300,child: AspectRatio(aspectRatio: 2.0/1.0,child: Container(color: Colors.red,)));}
} 

Card

card是卡片组件，内容可以由大多数类型的weidget构成，card具有圆角和阴影，这让它看起俩更具有立体感。

组件属性

属性	说明
margin	外边距
child	子组件
Shspe	Card的阴影效果，默认的阴影兄啊过为圆角的长方形边。

 class HomeContent extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn ListView(children: [Card(margin: EdgeInsets.all(10),child: Column(children: [ListTile(title: Text('你太有才了',style: TextStyle(fontSize: 20.0),),subtitle: Text('xitu掘金'),),ListTile(title: Text('落花本是无情物'),subtitle: Text('化作春泥更护花'),)],),),Card(margin: EdgeInsets.all(10),child: Column(children: [ListTile(title: Text('你太有才了',style: TextStyle(fontSize: 20.0),),subtitle: Text('xitu掘金'),),ListTile(title: Text('落花本是无情物'),subtitle: Text('化作春泥更护花'),)],),)],);}
} 

class HomeContent extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn ListView(children: [Card(margin: EdgeInsets.all(10.0),child: Column(children: [AspectRatio(aspectRatio: 2 / 1,child: Image.network('https://p9-passport.byteacctimg.com/img/user-avatar/c21cdb224f42c072c2bb55075c9adf8d~300x300.image',fit: BoxFit.cover,),),ListTile(title: Text('你太有才了~~'),subtitle: Text('xitu掘金'),leading: Container(width: 50,height: 50,decoration: BoxDecoration(borderRadius: BorderRadius.circular(25),image: DecorationImage(image: NetworkImage('https://p9-passport.byteacctimg.com/img/user-avatar/c21cdb224f42c072c2bb55075c9adf8d~300x300.image'))),),)],),)],);}
} 

ending

持续学习~~ 如有错误的地方还请指正