一起来学 Flutter 之文本组件、容器组件（一）

import 'package:flutter/material.dart';
void main () => runApp(containerApp());

class containerApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'Text widget',
        home:Scaffold(
          body:Center(
	//在页面中放入一个容器组件，再向容器组件中放入一个文本组件
           child:Container(
             child:Text('你好 Santa',),
           ),
          ),
        ),
      );
  }
}

Alignment 属性

注意，该属性主要针对容器组件的子组件，而不是容器组件本身的布局属性也就是只对 child 下的组件生效。

• bottomCenter:下部居中对齐。
• botomLeft: 下部左对齐。
• bottomRight：下部右对齐。
• center：纵横双向居中对齐。
• centerLeft：纵向居中横向居左对齐。
• centerRight：纵向居中横向居右对齐。
• topLeft：顶部左侧对齐。
• topCenter：顶部居中对齐。
• topRight： 顶部居左对齐。

 child:Container(
             child:Text('你好 Santa',),
 		alignment: Alignment.center,)

同时，还可以设置容器的大小，颜色等属性

child:Container(
             child:Text('你好 Santa',),
 		alignment: Alignment.center,
 		 width:300.0,
  		height:300.0,
  		color: Colors.lightBlue,)

另外，容器还具有边距属性，padding 和 margin，与 CSS 中的定义一样，padding 是容器和 child 子组件之间的距离，而 margin 则是容器和其外部组件之间的距离。

child:Container(
             child:Text('你好 Santa',),
 		alignment: Alignment.center,
 		 width:300.0,
  		height:300.0,
  		color: Colors.lightBlue,
		//需要注意一点的是，两个属性值需要new一个新的常量来对应属性值
		//Flutter中，组件的属性值通常是double类型，而不是int，所以10应该写成10.0
		 padding:const EdgeInsets.fromLTRB(20.0,20.0,10.0,10.0),  
		 margin: const EdgeInsets.all(10.0),)

decoration 属性

decoration 是 container 的修饰器，主要的功能是设置背景和边框。
比如我们现在要给容器加一个渐变的背景色，则：

        child: Container(
              child: Text("你好 Santa"),
              width:500.0,
              height:400.0,
              decoration:new BoxDecoration(
                  gradient:const LinearGradient(
                      colors:[Colors.lightBlue,Colors.blue,Colors.blueAccent]
                  )
              ),
            ),

但是需要注意的是，此处的 decoration 属性会 colors 属性冲突，二者取其一。

border 边框属性

可以通过 border 属性，为容器设置边框属性

border:Border.all(width:2.0,color:Colors.red）

以上就是 Flutter 的文本组件和容器组件，第一次写 Flutter 技术文章，如有错误，请指正，谢谢！