本篇博客将把Flutter所有UI控件的使用方法写出，我学习Flutter是通过Flutter官网来学习的，不需要科学上网，比如这这个网址说的就是Flutter的UI控件的使用方法 https://flutter.io/widgets/widgetindex/

下面是我直接从这个官网控件目录里贴出来的，说的是Flutter所有的控件，超级多，而且还有Android和iOS类似控件

Flutter Widget Index

This is an alphabetical list of nearly every widget that is bundled with Flutter. You can also browse widgets by category.

1.基础控件

首先说一下最基础的控件有哪些，基础使用方法

文字显示

new Text('Hello World', style: new TextStyle(fontSize: 32.0))

图片显示

new Image.asset('images/myPic.jpg', fit: BoxFit.cover)

关于本地图片资源使用这里我需要说一下，首先在项目最顶部创建一个images文件夹放入一张图片lake.jpeg，然后在pubspec.yaml添加几行代码，表示引用images文件夹下的lake.jpeg图片，因为我把注释都删除了，所以代码看起来不多，但是原本的注释非常多，建议大家多看看注释

name: flutter_app
description: A new Flutter application.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter

  assets:
     - images/lake.jpeg

图标显示，就是使用系统里的图标图片

new Icon(Icons.star, color: Colors.red[500])

这些基础控件的一些属性，大家就Command&鼠标左键点击Text类看看源码

好，我们把它们在APP里显示出来

修改main.dart文件，其中可以看得出来有两个顶层控件，一个appBar代表标题栏，一个body继承ListView代表主体内容

这个ListView默认是竖直方向的，和我们平常用的ListView很像，我们只需要把一些基础控件的对象放入其中，他会自动摆放的

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return new MaterialApp(
      title: 'Flutter base UI Widget',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Flutter base UI Widget'),
        ),
        body: new ListView(
          children: <Widget>[
            //add code
            new Text('Hello World', style: new TextStyle(fontSize: 32.0)),
            new Image.asset('images/lake.jpeg', width: 200.0,height: 200.0, fit: BoxFit.cover),
            new Icon(Icons.star, color: Colors.red[500])



          ],
        ),
      ),
    );
  }
  }

安装看效果，很好，一切正常

如果我们只显示Text，并且放在屏幕中央，那就修改body这段代码，就可以完成最经典的Hello World例子

      body: new Center(
        child: new Text('Hello World', style: new TextStyle(fontSize: 32.0)),
      ),

2.Column、Row

Row指的是横向的一排，Column指的是竖直的一列，之前说过ListView，Row类似子控件排放方向是横向的ListView，Column则是子控件排放方向是竖直的ListView

比如下图就是一个Row完成的，一个Row包含了三个子控件，第一个子控件是Column，其他是Icon、Text，而这个Column又放入了两个Text

代码如下（Container只是一个容器，类似ViewGroup，他没有控制子控件的能够，所以需要通过Row和Column来控制子控件的排放）

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    Widget titleSection = new Container(
      padding: const EdgeInsets.all(32.0),
      child: new Row(
        children: [
          new Expanded(
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                new Container(
                  padding: const EdgeInsets.only(bottom: 8.0),
                  child: new Text(
                    'Oeschinen Lake Campground',
                    style: new TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                new Text(
                  'Kandersteg, Switzerland',
                  style: new TextStyle(
                    color: Colors.grey[500],
                  ),
                ),
              ],
            ),
          ),
          new Icon(
            Icons.star,
            color: Colors.red[500],
          ),
          new Text('41'),
        ],
      ),
    );

    return new MaterialApp(
      title: 'Flutter base UI Widget',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Flutter base UI Widget'),
        ),
        body: new ListView(
          children: <Widget>[
            //add code
            titleSection


          ],
        ),
      ),
    );
  }
  }

然后这个Row和Column有mainAxisAlignment、crossAxisAlignment和flex属性

对于Row，mainAxisAlignment是横向，crossAxisAlignment是竖直方向，对于Column则相反，而flex则类似weight，在Row、Column里的子控件这个flex属性默认为1，通过这个flex来计算子控件在mainAxisAlignment方向占有的长度

我修改titleSection的代码

    Widget titleSection = new Container(
      padding: const EdgeInsets.all(32.0),
      child: new Row(
        children: [
          new Text('one'),
          new Text('two'),
          new Text('three')
        ],
      ),
    );

显示如下：

如果我加上一行代码

    Widget titleSection = new Container(
      padding: const EdgeInsets.all(32.0),
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          new Text('one'),
          new Text('two'),
          new Text('three')
        ],
      ),
    );

效果，看得出来这个几个Text平均占用了宽度，如果是Column则是平均占用了高度，如果mainAxisAlignment设置为center，则是三个Text居中并且紧贴在一起

如果我添加flex属性

    Widget titleSection = new Container(
      padding: const EdgeInsets.all(32.0),
      child: new Row(

        children: [
          new Expanded(
             // flex:1,
              child: new Text('one')),
          new Expanded(
            flex: 2,
              child: new Text('two')),
          new Expanded(
             // flex:1,
              child: new Text('three'))
        ],
      ),
    );

这下子我们能够看得出来中间的子控件占有了屏幕一半的宽度

然后MainAxisSize.min这个属性能够是的子控件之间尽量贴在一起

3.Container

之前虽然使用了Container，但是好像没有看出来有啥作用，但是人家还是有一点作用的比如加边框

我试试

    Widget titleSection = new Container(
      decoration: new BoxDecoration(
        border: new Border.all(width: 10.0, color: Colors.black38),
        borderRadius:
        const BorderRadius.all(const Radius.circular(8.0)),

      ),
      margin: const EdgeInsets.all(32.0),
      padding: const EdgeInsets.all(32.0),
      child: new Row(

        children: [
          new Expanded(

             // flex:1,
              child: new Text('one')),
          new Expanded(
            flex: 2,
              child: new Text('two')),
          new Expanded(
             // flex:1,
              child: new Text('three'))
        ],
      ),
    );

效果如下

4.GridView

表格布局，maxCrossAxisExtent指的是交叉方向的最大长度（GridView的主方向是竖直，交叉方向就是横向），padding和之前的Container一样，mainAxisSpacing和crossAxisSpacing指的是主方向和交叉方向，子控件之间的间距，children属性则是设置子控件（List<Widget>类型）

Widget buildGrid() {
  return new GridView.extent(
      maxCrossAxisExtent: 150.0,
      padding: const EdgeInsets.all(4.0),
      mainAxisSpacing: 4.0,
      crossAxisSpacing: 4.0,
      children: _buildGridTileList(30));
}

完整代码贴出

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

// The images are saved with names pic1.jpg, pic2.jpg...pic30.jpg.
// The List.generate constructor allows an easy way to create
// a list when objects have a predictable naming pattern.
List<Container> _buildGridTileList(int count) {
  List<Container> containers = new List<Container>.generate(
      count,
          (int index) =>
      new Container(child: new Image.asset('images/lake.jpeg',width: 100.0,height: 100.0, fit: BoxFit.cover)));
  return containers;
}

Widget buildGrid() {
  return new GridView.extent(
      maxCrossAxisExtent: 150.0,
      padding: const EdgeInsets.all(4.0),
      mainAxisSpacing: 4.0,
      crossAxisSpacing: 4.0,
      children: _buildGridTileList(30));
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: buildGrid(),
      ),
    );
  }
}

效果如下

5.Stack

就是FrameLayout，帧布局，以左上角为起始点，按照子控件的先后顺序，直接覆盖上去，后来居上

CircleAvatar就是圆形控件，放入图片就能形成圆形图片。BoxDecoration就是设置当前Container的content背景颜色。

    var stack = new Stack(
      alignment: const Alignment(0.6, 0.6),
      children: [
        new CircleAvatar(
          backgroundImage: new AssetImage('images/lake.jpeg'),
          radius: 100.0,
        ),
        new Container(
          decoration: new BoxDecoration(
            color: Colors.black45,
          ),
          child: new Text(
            'Mia B',
            style: new TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
        ),
      ],
    );

效果如下

6.Card

CardView不多bb，elevation：阴影大小

    var card = new SizedBox(
      height: 95.0,
      child: new Card(
        margin: const EdgeInsets.all(10.0),
        elevation: 10.0,
        child: new Column(
          children: [
            new ListTile(
              title: new Text('1625 Main Street',
                  style: new TextStyle(fontWeight: FontWeight.w500)),
              subtitle: new Text('My City, CA 99984'),
              leading: new Icon(
                Icons.restaurant_menu,
                color: Colors.blue[500],
              ),
            )
          ],
        ),
      ),
    );

效果

其中主体是ListTitle，ListTitle是一个特殊的Row，但是能过最多放入三排文字，并且可以放入图片

7.未完待续

因为还有不少的控件的使用我没有贴出，所以就有了这个标题，怎么说呢，我算是抛砖引玉，希望大家能够更好的灵活使用Flutter自带的控件

Flutter 所有UI控件使用教程

下面是我直接从这个官网控件目录里贴出来的，说的是Flutter所有的控件，超级多，而且还有Android和iOS类似控件

Flutter Widget Index

AbsorbPointer

AlertDialog

Align

AnimatedBuilder

AnimatedContainer

AnimatedCrossFade

AnimatedDefaultTextStyle

AnimatedListState

AnimatedModalBarrier

AnimatedOpacity

AnimatedPhysicalModel

AnimatedPositioned

AnimatedSize

AnimatedWidget

AnimatedWidgetBaseState

Appbar

AspectRatio

AssetBundle

BackdropFilter

Baseline

BottomNavigationBar

BottomSheet

ButtonBar

Card

Center

Checkbox

Chip

ClipOval

ClipPath

ClipRect

Column

ConstrainedBox

Container

CupertinoActivityIndicator

CupertinoAlertDialog

CupertinoButton

CupertinoDialog

CupertinoDialogAction

CupertinoFullscreenDialogTransition

CupertinoNavigationBar

CupertinoPageScaffold

CupertinoPageTransition

CupertinoPicker

CupertinoSlider

CupertinoSwitch

CupertinoTabBar

CupertinoTabScaffold

CupertinoTabView

CustomMultiChildLayout

CustomPaint

CustomScrollView

CustomSingleChildLayout

DataTable

Date & Time Pickers

DecoratedBox

DecoratedBoxTransition

DefaultTextStyle

Dismissible

Divider

DragTarget

Draggable

Drawer

ExcludeSemantics

ExpansionPanel

FadeTransition

FittedBox

FlatButton

FloatingActionButton

Flow

FlutterLogo

Form

FormField

FractionalTranslation

FractionallySizedBox

FutureBuilder

GestureDetector

GridView