二 Flutter开发实战高仿微信发现页( 二 ) _微信开发

如果只有一个子控件，可以使用 Align or 控件定义该子控件位置。
实例
【二Flutter开发实战高仿微信发现页】 1 new Row(2children: [3new Expanded(4child: new Text('Deliver features faster', textAlign: TextAlign.center),5),6new Expanded(7child: new Text('Craft beautiful UIs', textAlign: TextAlign.center),8),9new Expanded(10child: new FittedBox(11fit: BoxFit.contain, // otherwise the logo will be tiny12child: const FlutterLogo(),13),14),15],16 )
用法 2.1.2垂直布局简介
flex垂直布局控件，能够将子控件垂直排列。
用法与Row控件一样。实例
new Column(2crossAxisAlignment: CrossAxisAlignment.start,3mainAxisSize: MainAxisSize.min,4children: [5new Text('We move under cover and we move as one'),6new Text('Through the night, we have one shot to live another day'),7new Text('We cannot let a stray gunshot give us away'),8new Text('We will fight up close, seize the moment and stay in it'),9new Text('It’s either that or meet the business end of a bayonet'),10new Text('The code word is ‘Rochambeau,’ dig me?'),11new Text('Rochambeau!', style: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 2.0)),12],13 )
用法 2.1.3 Stack 层布局
简介
实例
用法
2.1.4 主轴
简介
实例
用法
2.1.5
简介
实例
用法
2.2 基本组件
控件本身通常由许多小型、单用途的控件组成，结合起来产生强大的效果，例如，是一种常用的控件，由负责布局、绘画、定位和大小调整的几个控件组成，具体来说，是由、、 Align、、和控件组成，而不是将子类化来产生自定义效果，您可以用这种新颖的方式组合这些以及其他简单的控件。
类的层次结构是扁平的，以最大化可能的组合数量。
在写应用程序时，经常会使用和编写新控件，两者的差别在于你是否要管理控件的状态。一个控件的主要任务是实现build函数，定义控件中其他较低层次的控件。build函数将依次构建这些控件，直到底层渲染对象。
控件控件IOS控件
/
/
/
Text
—
–
(库里面的)
—
(库里面的)
—
/
–
的:=“”
–
Row
:=“”
–
–
Image
Stack
/
–
Algin
属性
–
:=”
属性
w
–
2.2.1简介
容器，一个常用的控件，由基本的绘制、位置和大小控件组成。负责创建矩形的可视元素，可以用来设计样式，比如背景、边框和阴影，也有边距、填充和大小限制，另外，还可以在三维空间利用矩阵进行变换。
没有子控件的容器尽可能大，除非传入的大小约束是无限的，在这种情况下，它们尽可能小。有子控件的容器将自己的尺寸给他们的孩子。我们可以通过width、和属性控制size 。
实例
new Container(constraints: new BoxConstraints.expand(height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,),padding: const EdgeInsets.all(8.0),color: Colors.teal.shade700,alignment: Alignment.center,child: new Text('Hello World', style: Theme.of(context).textTheme.display1.copyWith(color: Colors.white)),foregroundDecoration: new BoxDecoration(image: new DecorationImage(image: new NetworkImage('https://www.example.com/images/frame.png'),centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),),),transform: new Matrix4.rotationZ(0.1),)
用法 2.2.2 Image 简介
显示图像的控件，Image控件有多种构造函数：