flutter 子元素宽高比组件AspectRatio、卡片组件card、处理圆形头像组件CircleAvatar

╰半夏微凉° 2021-07-24 19:15 294阅读 0赞

子元素宽高比组件
    	AspectRatio(
    		aspectRatio: double数值, 
            child:组件
    	)
    	 其中:
    	 父元素高/宽只能设置其中一个,子元素的宽/高是父元素高/宽*1/数值,若无父元素继承屏幕的宽度,高度为屏幕宽度*1/数值
    
    卡片组件
     默认为白色有边框的卡片
    	Card(
    		 margin：EdgeInsets.xx,
    		 child:组件,   可通过Row、Colum组件填充多个组件
    		 color:xx
    	)
    
    圆形头像组件
     会默认将图片剪切成圆形,多用作头像
    	 CircleAvatar(
    	    child,
    	    backgroundColor,
    	    backgroundImage:NetworkImage("xx")/AssestImage("xx"),  传入图片地址
    	    foregroundColor,
    	    radius:double数值,   控制圆形背景大小
    	    minRadius,
    	    maxRadius,
    	)

代码示例:

import "package:flutter/material.dart";
    
    void main()
    { 
      runApp(App());
    }
    
    class App extends StatelessWidget{ 
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
        return MaterialApp(
          home:Scaffold(appBar: AppBar(title: Text("hh")),
            body:Home3()
          )
          ,);
      }
    }
    
    class Home extends StatelessWidget{ 
    
    
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
        return Container(
        // height:300 ,
        width: 300,
        color:Colors.blue,
        child: AspectRatio(
            aspectRatio: 3.0,  //父元素高/宽只能设置其中一个,子元素的宽/高是父元素高/宽*1/数值,若无父元素继承屏幕的宽度,高度为屏幕宽度*1/数值
    
            child: Container(
              color:Colors.orange
            ),
    
          ),
        );
      }
    }
    
    class Home2 extends StatelessWidget{ 
    
    
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
        return ListView(
    
          children: <Widget>[
            Card(
              margin: EdgeInsets.all(10),
              child: Column(children: <Widget>[
                ListTile(
                  title:Text("张三",style:TextStyle(fontSize: 28)),
                  subtitle: Text("工程师"),
                ),
                ListTile(
                  subtitle: Text("地址"),
                ),
                ListTile(
                  subtitle: Text("男"),
                )
    
              ],),
            ),
            
            Card(
              margin: EdgeInsets.all(10),
              child: Column(children: <Widget>[
                ListTile(
                  title:Text("张三",style:TextStyle(fontSize: 28)),
                  subtitle: Text("工程师"),
                ),
                ListTile(
                  title:Text("张三",style:TextStyle(fontSize: 28)),
                  subtitle: Text("工程师"),
                ),
                ListTile(
                  title:Text("张三",style:TextStyle(fontSize: 28)),
                  subtitle: Text("工程师"),
                )
    
              ],),
            )
          ],
        );
      }
    }
    
    class Home3 extends StatelessWidget{ 
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
        return ListView(
    
            children: <Widget>[
              Card(
                margin:EdgeInsets.all(10),
                child: Column(
                  children: <Widget>[
                    AspectRatio(
                    child:Image.network("https://i0.hdslb.com/bfs/archive/8f00de38858d9a9e60350fb0b7962929473d0932.jpg",fit: BoxFit.cover,),
                    aspectRatio: 2.0,),
                    ListTile(title: Text("哇啦啦"),
                    subtitle: Text('哇哈哈哈哈哈哈哈哈哈哈哈'),
                    leading: ClipOval(
                      child: Image.network("https://i0.hdslb.com/bfs/face/e85d7ab3425d3dd0f0796bd7f945b47ac27ca82a.jpg@52w_52h.jpg")),
                    )
     
                  ],              
                ),
              ),
              Card(
                margin:EdgeInsets.all(10),
                child: Column(
                  children: <Widget>[
                    AspectRatio(
                    child:Image.network("https://i0.hdslb.com/bfs/archive/8f00de38858d9a9e60350fb0b7962929473d0932.jpg",fit: BoxFit.cover,),
                    aspectRatio: 2.0,),
                    ListTile(title: Text("哇啦啦"),
                    subtitle: Text('哇哈哈哈哈哈哈哈哈哈哈哈'),
                    leading:CircleAvatar(
                      radius: 30, 
                      backgroundImage: NetworkImage("https://i0.hdslb.com/bfs/face/e85d7ab3425d3dd0f0796bd7f945b47ac27ca82a.jpg@52w_52h.jpg",scale:1.0),
                    )
                    )
     
                  ],              
                ),
              )
            ],   
        );
      }
    }