android flutter:容器类组件

本节学习老孟《Flutter实战入门》
一、填充布局（Padding）
Padding是一个可以设置内边距的容器控件，属性如下：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:path_provider/path_provider.dart';
import 'package:flutter/cupertino.dart';

String _storageDir = '';
void main() {
  runApp(MyCupertinoApp());
}

class MyCupertinoApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CupertinoSwitchDemo(),
    );
  }
}

class CupertinoSwitchDemo extends StatefulWidget {
  @override
  State createState() {
    return  _CupertinoSwitchDemo();
  }
}

class _CupertinoSwitchDemo extends State {
  bool _value = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Padding(
          padding: EdgeInsets.all(100.0),
          child: CupertinoSwitch(
            value: _value,
            onChanged: (bool v) {
              setState(() {
                _value = v;
              });
            },
            activeColor: Colors.green,
          ),
        )
    );
    
    throw UnimplementedError();
  }

二、居中布局（Center）
Center是一个子控件居中显示的容器类控件。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:path_provider/path_provider.dart';
import 'package:flutter/cupertino.dart';

String _storageDir = '';
void main() {
  runApp(MyCupertinoApp());
}

class MyCupertinoApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CupertinoSwitchDemo(),
    );
  }
}

class CupertinoSwitchDemo extends StatefulWidget {
  @override
  State createState() {
    return  _CupertinoSwitchDemo();
  }
}

class _CupertinoSwitchDemo extends State {
  bool _value = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
//          padding: EdgeInsets.all(100.0),
          child: CupertinoSwitch(
            value: _value,
            onChanged: (bool v) {
              setState(() {
                _value = v;
              });
            },
            activeColor: Colors.green,
          ),
        )
    );
    throw UnimplementedError();
  }

三、对齐布局（Align）
Align是一个将子组件对齐，并根据子组件调整自身大小的容器类控件。属性如下：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:path_provider/path_provider.dart';
import 'package:flutter/cupertino.dart';

String _storageDir = '';
void main() {
  runApp(MyCupertinoApp());
}

class MyCupertinoApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CupertinoSwitchDemo(),
    );
  }
}

class CupertinoSwitchDemo extends StatefulWidget {
  @override
  State createState() {
    return  _CupertinoSwitchDemo();
  }
}

class _CupertinoSwitchDemo extends State {
  bool _value = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Align(
          alignment: Alignment.bottomCenter,
//          widthFactor: 5.0,
//          heightFactor: 5.0,
          child: CupertinoSwitch(
            value: _value,
            onChanged: (bool v) {
              setState(() {
                _value = v;
              });
            },
            activeColor: Colors.green,
          ),
        )
    );
    throw UnimplementedError();
  }
}

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:path_provider/path_provider.dart';
import 'package:flutter/cupertino.dart';

String _storageDir = '';
void main() {
  runApp(MyCupertinoApp());
}

class MyCupertinoApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CupertinoSwitchDemo(),
    );
  }
}

class CupertinoSwitchDemo extends StatefulWidget {
  @override
  State createState() {
    return  _CupertinoSwitchDemo();
  }
}

class _CupertinoSwitchDemo extends State {
  bool _value = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Align(
          alignment: Alignment.bottomCenter,
          widthFactor: 5.0,
          heightFactor: 5.0,
          child: CupertinoSwitch(
            value: _value,
            onChanged: (bool v) {
              setState(() {
                _value = v;
              });
            },
            activeColor: Colors.green,
          ),
        )
    );
    throw UnimplementedError();
  }
}

四、固定宽高比（AspectRadio）
AspenRatio是固定宽高比控件。AspectRadio会尽可能扩展，height通过width和设置的aspectRadio计算而得。

body: Container(
      color: Colors.yellow,
      width: 300,
      height: 100,
      child: AspectRatio(aspectRatio: 10,child: Text('AspectRadio'),)
    ),

 body: Container(
      color: Colors.yellow,
      width: 300,
//      height: 100,
      child: AspectRatio(aspectRatio: 10,child: Text('AspectRadio'),)
    ),

body: Container(
      color: Colors.yellow,
//      width: 300,
      height: 20,
      child: AspectRatio(aspectRatio: 10,child: Text('AspectRadio'),)
    ),

运行结果发现，Container宽高值都设置后，AspectRadio值忽略。只设置宽度，高度=宽度/AspectRadio；只设置高度，宽度 = 高度 * AspectRadio。
五、Transform
Transform是几个矩阵变换控件，通过它可以对子控件进行3D操作，比如旋转
缩放、平移等。属性如下：

//将文字旋转60度
body: Center(
      child: Transform.rotate(
        alignment: Alignment.center,
        angle: pi/3,
//        origin: Offset(100, 100),
        child: Text('Flutter 实战入门'),

      ),
    ),

//文字旋转60度，且大小放大2倍
body: Center(
      child: Transform(
        transform: Matrix4.diagonal3Values(2, 2, 1)..rotateZ(pi/3),
        child: Text('Flutter 实战入门'),

      ),
    ),

六、Stack
Stack是重叠控件，子元素是叠在一起的。

body: Stack(
      alignment: Alignment.center,//使文字处于圆形中心位置
      children: [
        CircleAvatar(
          child: Image.asset('assets/icons/ic_launcher_test.png'),
          radius: 100,//圆形图片半径
        ),
        Text('Flutter 实战入门',style: TextStyle(color: Colors.red),),
      ],
    ),

七、流式布局（Wrap）
Wrap为流式布局，当子控件在一行空间不够时用来换行显示。属性如下：

 body: Wrap(
      direction: Axis.horizontal,//子控件按水平/垂直方向排列
      spacing: 10,//水平方向两个子控件间的距离（direction: Axis.horizontal）
      alignment: WrapAlignment.center,
      runSpacing: 10,//垂直方向两个子控件间的距离（direction: Axis.horizontal）
      textDirection: TextDirection.ltr,
      verticalDirection: VerticalDirection.down,
      children: [
        RaisedButton(child: Text('Flutter 实战入门1'),),
        RaisedButton(child: Text('Flutter 实战入门2'),),
        RaisedButton(child: Text('Flutter 实战入门3'),),
        RaisedButton(child: Text('Flutter 实战入门4'),),
        RaisedButton(child: Text('Flutter 实战入门5'),),
        RaisedButton(child: Text('Flutter 实战入门6'),),
      ],
    ),