Flutter学习之AspectRatio、Card卡片组件 Wrap组件，以及图片切圆角，

2022-04-07 221 阅读1分钟

AspectRatio作用：根据设置调整子元素的宽高比

Center(
  child: Container(
    width: 300,
    color: Colors.red,
    /*
    * 这里是指宽高比,那么这个宽高针对的是外层也就是Container的宽高
    * 这里设置了width为300,然后宽高比是2/1 那么代码编译出来的高度就是150
    * */
    child: AspectRatio(
        aspectRatio: 2.0/1.0,
      child: Container(color: Colors.red),
    ),
  ),
);

Card

实现卡片效果，自带阴影效果。

Wrap

用来实现类似于流布局

Wrap(
  //主轴的方向,默认水平
  // direction: ,
  //主轴方向上的间距
  spacing: 10,
  //run的间距
  runSpacing: 10,
  //文本方向
  textDirection: TextDirection.ltr,
  //定义了children摆放顺序
  verticalDirection: VerticalDirection.down,
  //run的对齐方式 run为新的一行或者一列
  //设置位置
  // runAlignment: WrapAlignment.start,
  children: [
    MyButton('第一季'),
    MyButton('第二111季'),
    MyButton('第三季'),
    MyButton('第四季'),
    MyButton('第五季'),
    MyButton('第六季'),
    MyButton('第七季'),
    MyButton('第八季'),
  ],
);

图片切圆角（以后会用到记录一下）

这种方式不用设置图片大小他会自动切。尽量用这个

ListTile(
  title: Text('张三', style: TextStyle(fontSize: 28),),
  subtitle: Text('高级工程师'),
  leading: CircleAvatar(
    backgroundImage: NetworkImage('imageUrl'),
  ),
),

这种方式，需要宽高一致才能切圆否这就是椭圆。

ListTile(
  title: Text('张三', style: TextStyle(fontSize: 28),),
  subtitle: Text('高级工程师'),
  leading: ClipOval(
    child: Image.network('imageUrl', fit: BoxFit.cover),
  )
),