Flutter_常用控件及其属性

Flutter常用控件及其属性

Container

	一个拥有绘制、定位、调整大小的 widget。

属性

	alignment → AlignmentGeometry
	将孩子与容器内的对齐。
	
	child → Widget
	容器所包含 的孩子。
	
	constraints → BoxConstraints
	适用于儿童的其他限制。
	
	decoration → Decoration
	孩子 背后的装饰。
	
	foregroundDecoration → Decoration
	在孩子面前涂漆的装饰。
	
	margin → EdgeInsetsGeometry
	空的空间环绕装饰和孩子。
	
	padding → EdgeInsetsGeometry
	在装饰里面刻的空的空间。如果有的话，将孩子放在这个衬垫内。
	
	transform → Matrix4
	在绘制容器之前应用的转换矩阵。

代码

	class MyApp extends StatelessWidget {
	  @override
	  Widget build(BuildContext context) {
	    return Center(
	      child: Container(
	        margin: const EdgeInsets.all(10.0),
	        padding: const EdgeInsets.all(20),
	        color: const Color(0xFF00FF00),
	        width: 200.0,
	        height: 200.0,
	        child: Text(
	          "123124",
	          style: TextStyle(color: Color(0xFFffFFff)),
	          textDirection: TextDirection.ltr,
	        ),
	      ),
	    );
	  }
	}		

Row

在水平方向上排列子widget的列表。

属性

	children → List<Widget>
	树中此小部件下方的小部件。
	
	crossAxisAlignment → CrossAxisAlignment
	如何将孩子放在十字轴上。
	
	direction → Axis
	用作主轴的方向。
	
	mainAxisAlignment → MainAxisAlignment
	如何将孩子放在主轴上
	
	mainAxisSize → MainAxisSize
	主轴应占用多少空间。
	
	textBaseline → TextBaseline
	如果根据基线对齐项目，则使用哪个基线。
	
	textDirection → TextDirection
	确定为水平，以及如何解释奠定孩子出去 start，并end在水平方向上。
	
	verticalDirection → VerticalDirection
	确定垂直放置孩子以及如何解释start和end垂直方向的顺序 。	

代码

	class MyApp extends StatelessWidget {
	  // This widget is the root of your application.
	  @override
	  Widget build(BuildContext context) {
	    return Row(
	      textDirection: TextDirection.ltr,
	      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
	      children: <Widget>[
	        Expanded(
	          child: Container(
	            color: Colors.red,
	            padding: EdgeInsets.all(5.0),
	          ),
	          flex: 1,
	        ),
	        Expanded(
	          child: Container(
	            color: Colors.yellow,
	            padding: EdgeInsets.all(5.0),
	          ),
	          flex: 2,
	        ),
	        Expanded(
	          child: Container(
	            color: Colors.blue,
	            padding: EdgeInsets.all(5.0),
	          ),
	          flex: 1,
	        ),
	      ],
	    );
	  }
	}

Column

在垂直方向上排列子widget的列表。

属性

	children → List<Widget>
	树中此小部件下方的小部件。
	
	crossAxisAlignment → CrossAxisAlignment
	如何将孩子放在十字轴上。
	
	direction → Axis
	用作主轴的方向。
	
	mainAxisAlignment → MainAxisAlignment
	如何将孩子放在主轴上。
	
	mainAxisSize → MainAxisSize
	主轴应占用多少空间。
	
	textBaseline → TextBaseline
	如果根据基线对齐项目，则使用哪个基线。
	
	textDirection → TextDirection
	确定为水平，以及如何解释奠定孩子出去 start，并end在水平方向上。
	
	verticalDirection → VerticalDirection
	确定垂直放置孩子以及如何解释start和end垂直方向的顺序 。

代码

	class MyApp extends StatelessWidget {
	  // This widget is the root of your application.