Flutter从入门到跑路 ------ AspectRation、Card、Wrap组件（六）

最新推荐文章于 2026-06-16 22:06:47 发布

原创最新推荐文章于 2026-06-16 22:06:47 发布 · 440 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#flutter #android

文章展示了在Flutter中如何使用AspectRation保持宽高比，Card创建卡片组件，以及Wrap实现流式布局。示例代码包括了AspectRation调整子元素比例，Card的内外边距和阴影效果，以及Wrap的主轴方向和间距设置。

AspectRation

根据设置调整子元素child的宽度比
在布局调教允许的范围内尽可能扩展，
widget高度由宽度和比率决定

属性	说明
aspectRation	宽高比

class AspectRation extends StatelessWidget {
  const AspectRation({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Container(
          width: 200,
          child: AspectRatio(aspectRatio: 2.0/1.0,
          child: Text("AspectRation"),
          ),
        ),
      ),
    );
  }
}

Card

card 卡片组件

属性	组件
margin	外边距
child	子组件
Shape	Card阴影效果默认效果圆角的长方形边

class LayoutDemos extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              AspectRatio(
                aspectRatio: 16/9,
                child: Image.network('http:www.baidu.com',fit: BoxFit.cover),
              ),
              ListTile(
                leading: ClipOval(
                child: Image.network('http:www.baidu.com'',fit: BoxFit.cover,height: 60,width: 60,),
                ),
                title: Text('xxxx'),
                subtitle: Text('xxxxxxx'),
              )
            ],
          ),
        )
      ],
    );
  }
}

Wrap

实现流布局，单行Wrap跟Row一致，单例Wrap与Column一致
Wrap可以设置多行多列

属性	说明
direction	主轴方向默认水平
alignment	主轴对其方式
spacing	主轴方向上的间距
textDirection	文本方向
vericalDirection	定义children摆放顺序
runAlignment	run的对齐方式
runSpacing	run间距

// wrap
class LayoutDemos extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Wrap(
      children: <Widget>[
        MyButton('第一行'),
        MyButton('第一行'),
        MyButton('第一行'),
        MyButton('第一行'),
        MyButton('第一行'),
        MyButton('第一行'),
        MyButton('第一行'),
        MyButton('第一行'),
      ],
    );
  }
}

class  MyButton extends StatelessWidget {

  final String text;
  const MyButton(this.text,{Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
   return RaisedButton(
      // onPressed: 
      child: Text('第一季'),
      textColor: Theme.of(context).accentColor,
      onPressed: (){
      // TO do
      },
    );
  }
  
}