1.Flutter AspectRatio 组件

• AspectRatio 的作用是根据设置调整子元素 child 的宽高比。
• AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展，widget 的高度是由宽 度和比率决定的，类似于 BoxFit 中的 contain，按照固定比率去尽量占满区域。
• 如果在满足所有限制条件过后无法找到一个可行的尺寸，AspectRatio 最终将会去优先 适应布局限制条件，而忽略所设置的比率。
  
  

import 'package:flutter/material.dart';
import 'package:flutterapp/main-1.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter APP'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 2.0/1.0,//此时宽度占满于整个屏幕，高度是宽度的1/2
        child: Container(
          color:Colors.red
        ),
      );
     
  }
}

2.Flutter Card 组件

Card 是卡片组件块，内容可以由大多数类型的 Widget 构成，Card 具有圆角和阴影，这让它 看起来有立体感。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter APP'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children:<Widget>[
        Card(
          margin:EdgeInsets.all(10),//和外层元素的距离
          child: Column(
            children: <Widget>[
              ListTile(
               title: Text(
                 '张三',
                 style: TextStyle(
                   fontSize:30.0
                 ),
                 ),
               subtitle: Text('1111111111'), 
              ),
              ListTile(
               title: Text(
                 '电话:183xxxxxxxx',
               ),
              ),
              ListTile(
               title: Text(
                 '地址:xxxxxxxxxxxx',
               ),
              )
            ],
          ),
        ),
           Card(
          margin:EdgeInsets.all(10),//和外层元素的距离
          child: Column(
            children: <Widget>[
              ListTile(
               title: Text(
                 '张三',
                 style: TextStyle(
                   fontSize:30.0
                 ),
                 ),
               subtitle: Text('1111111111'), 
              ),
              ListTile(
               title: Text(
                 '电话:183xxxxxxxx',
               ),
              ),
              ListTile(
               title: Text(
                 '地址:xxxxxxxxxxxx',
               ),
              )
            ],
          ),
        ),
           Card(
          margin:EdgeInsets.all(10),//和外层元素的距离
          child: Column(
            children: <Widget>[
              ListTile(
               title: Text(
                 '张三',
                 style: TextStyle(
                   fontSize:30.0
                 ),
                 ),
               subtitle: Text('1111111111'), 
              ),
              ListTile(
               title: Text(
                 '电话:183xxxxxxxx',
               ),
              ),
              ListTile(
               title: Text(
                 '地址:xxxxxxxxxxxx',
               ),
              )
            ],
          ),
        )
      ]
    );
    
     
  }
}

3.RaisedButton-按钮

Flutter 中通过 RaisedButton 定义一个按钮。RaisedButton 里面有很多的参数，

3.Wrap组件

Wrap 可以实现流布局，单行的 Wrap 跟 Row 表现几乎一致，单列的 Wrap 则跟 Row 表 现几乎一致。但 Row 与 Column 都是单行单列的，Wrap 则突破了这个限制，mainAxis 上空 间不足时，则向 crossAxis上去扩展显示。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter APP'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 10,
      children: <Widget>[
        MyButton("111"),
        MyButton("111"),
        MyButton("111"),
         MyButton("111"),
        MyButton("111"),
        MyButton("111"),
         MyButton("111"),
        MyButton("111"),
        MyButton("111"),
         MyButton("111"),
        MyButton("111"),
        MyButton("111"),
      ],
    );
  }
}
class MyButton extends StatelessWidget{
 final String text;

  const MyButton(this.text,{Key key, }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text(this.text), 
      textColor: Theme.of(context).accentColor,
      onPressed: () {},
    );
  }
  
}