Flutter 组件之Card(卡片)、AspectRatio(宽高比) 、Wrap(流布局)

AspectRatio(宽高比) 设置

宽高比相对于整个外层容器来设置,如果外层是全局屏幕, 宽高比就是按照屏幕的多少比例显示。 如果像下面的例子,宽度是300 宽高比为2/1 那么宽度就是300 。高度就是150

 class LearnAspectRatio extends StatelessWidget {
     
   @override
   Widget build(BuildContext context) {
     
      //TODO: implement build
      return Container(
        width: 300,
        // height: 200,
        // color: Colors.pink,
        child: AspectRatio(//宽高比 铺满整个页面,
          aspectRatio:2.0/1.0,
          child:Container(
            color: Colors.orange,
          )
        ),
      );
   }
 }

Card(卡片)

实现一个卡片列表

静态卡片

//静态卡片
 class LearnCard extends StatelessWidget {
     
   @override
   Widget build(BuildContext context) {
     
     // TODO: implement build
     return ListView(children: <Widget>[//一个竖向列表
       Card(//定义一个卡片
         margin: EdgeInsets.all(10),//外边距设置
         child: Column(children: <Widget>[//列布局
           AspectRatio(//上面的宽高比模块
               aspectRatio: 2.0 / 1.0,//宽高比为2/1
               child: Image.network(//网络图片
                   "https://timgsa.baidu.com/timg.jpg",
                   fit: BoxFit.cover)),//填充满整个元素
           ListTile(//列表元素
             leading: ClipOval(child:Image.network("https://timgsa.baidu.com/timg4.jpg",//裁剪头像
                   fit: BoxFit.cover,width: 60,height: 60,)),
             title: Text(//主标题
               "高级工程师",
               style: TextStyle(fontSize: 40),//文字样式
             ),
             subtitle: Text("我是一个高级工程师,现在还在北京上班 "),//副标题
           ),
           ListTile(title: Text("电话：1888888888888")),//列表元素
           ListTile(title: Text("地址：慷慨激昂冻死了房间里卡聚隆科技了")),//列表元素
         ]),
       ),
       Card(//下一个卡片基本一样的内容
         margin: EdgeInsets.all(10),
         child: Column(children: <Widget>[
           AspectRatio(//设置宽高比
               aspectRatio: 2.0 / 1.0,
               child: Image.network(
                 "https://timgsa.baidu.com/timg3.jpg",
                 fit: BoxFit.cover,
               )),
           ListTile(
             leading: ClipOval(child:Image.network(
                 "https://timgsa.baidu.com/timg83.jpg",
                 fit: BoxFit.cover,height: 60,width: 60,
               )),
             title: Text(
               "高级工程师1",
               style: TextStyle(fontSize: 40),
             ),
             subtitle: Text("我是一个高级工程师,现在还在北京上班 "),
           ),
           ListTile(title: Text("电话：alsjfklsajdfksakdflasjdf")),
           ListTile(title: Text("地址：safleje;o;aoe;ojfe")),
         ]),
       ),
       Card(
         margin: EdgeInsets.all(10),
         child: Column(children: <Widget>[
           AspectRatio(aspectRatio: 2.0/1.0,child: Image.network(
               "https://timgsa.baidu.com/ti4.jpg%3Fdown",
               fit: BoxFit.cover,
             )),
           ListTile(
             leading: CircleAvatar(backgroundImage: NetworkImage("https://timgsa.baidu.com/timg124.jpg%3Fdown",)),
             title: Text(
               "高级工程师2",
               style: TextStyle(fontSize: 40),
             ),
             subtitle: Text("我是一个高级工程师,现在还在北京上班 "),
           ),
           ListTile(title: Text("电话：1999999999999")),
           ListTile(title: Text("地址：施蒂利克福建省了的房间里可使肌肤卡时间段里看风景 ")),
         ]),
       ),
     ]);
   }
 }

动态卡片

数据是上一章示例数据

// 动态卡片
 class LearnCard extends StatelessWidget {
     
   List<Widget> _getData() {
     	//定义遍历方法
     var temp = casts.map((value) {
     //遍历
       return Card(//返回卡片控件
           margin: EdgeInsets.all(10),//边距
           child: Column(children: <Widget>[//列布局
             AspectRatio(//宽高比设置
                 aspectRatio: 2.0 / 1.0,//宽高比
                 child: Image.network(//网络图片
                     value["avatars"],//图片动态地址
                     fit: BoxFit.cover)),//充满元素
             ListTile(//列表元素 头像可以使用CircleAvatar组件,自动裁剪
               leading: ClipOval(
                   child: Image.network(
                 value["avatars"],
                 fit: BoxFit.cover,
                 width: 60,
                 height: 60,
               )),
               title: Text(
                 value["name"],
                 style: TextStyle(fontSize: 40),
               ),
               subtitle: Text(value["name_en"]),
             ),
             ListTile(title: Text("电话：1888888888888")),
             ListTile(title: Text("地址：慷慨激昂冻死了房间里卡聚隆科技了")),
           ]));
     });
     return temp.toList();
   }

   @override
   Widget build(BuildContext context) {
     
     // TODO: implement build
     return ListView(//定义列表
       children: this._getData(),//调用获取动态卡片数据方法
     );
   }
 }

Wrap(流布局)

就像许多按钮元素长度不一,但是要随机排列, 不管元素宽度是否一致会自动换行展示。还可以设置主轴方向边距,文本方向,摆放顺序,对齐方式,间距

class LearnWrap extends StatelessWidget {
     
  @override
  Widget build(BuildContext context) {
     
    // TODO: implement build
    return Wrap(
      spacing: 10,//主轴边距
      runSpacing: 10,//run 的间距
      direction:Axis.horizontal,//横向还是纵向展示
      alignment: WrapAlignment.start,//整体从哪开始 就是css juetify-content的方式    
      runAlignment: WrapAlignment.center,//Y轴对齐方式
      children: <Widget>[
        MyButton("第一级"),
         MyButton("第一级11222"),
         MyButton("第一级222"),
         MyButton("第一级2222"),
         MyButton("第一级222"),
         MyButton("第一级222"),
         MyButton("第一级2333322"),
         MyButton("第一级2242"),
         MyButton("第一级2242"),
         MyButton("第一级2244444442"),

      ],
    );
   
  }
}

// 定义自定义Button组件
class MyButton extends StatelessWidget {
     //封装按钮组件
  String btnName;
  var callBack;
  MyButton(this.btnName,{
     Key key}) :super(key:key);
  @override
  Widget build(BuildContext context) {
     
    // TODO: implement build
    return RaisedButton(
      child: Text(this.btnName),
      textColor: Theme.of(context).accentColor,
      onPressed: (){
     
        print("111------------");
      },
    );
  }
}