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

布满荆棘的人生 2023-07-17 05:59 65阅读 0赞

##### 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(流布局) #####

> 就像许多按钮元素长度不一,但是要随机排列, 不管元素宽度是否一致会自动换行展示。还可以设置主轴方向边距,文本方向,摆放顺序,对齐方式,间距  
> ![在这里插入图片描述][20200319205359272.png]

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------------");
          },
        );
      }
    }

[20200319205359272.png]: /images/20230528/28495159b8f044989ebb10f137b1b57e.png