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

子元素宽高比组件
	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),
                )
                )
 
              ],              
            ),
          )
        ],   
    );
  }
}