Flutter的学习笔记 2

Container容器的基本应用

child:Container(
    child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
    ),

Alignment属性

用于设定容器内容的对齐方式例如文字。
bottomCenter:下部居中对齐。
botomLeft: 下部左对齐。
bottomRight：下部右对齐。
center：纵横双向居中对齐。
centerLeft：纵向居中横向居左对齐。
centerRight：纵向居中横向居右对齐。
topLeft：顶部左侧对齐。
topCenter：顶部居中对齐。
topRight： 顶部居左对齐。

例：

alignment: Alignment.center,

设置容器的基本量

设置宽、高和颜色属性是相对容易的，只要在属性名称后面加入浮点型数字就可以了，比如要设置宽是500，高是400，颜色为亮蓝色。

width:500.0,
height:400.0,
color: Colors.lightBlue,

padding属性

为了设置文档与内容的距离

padding:const EdgeInsets.all(10.0),
padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),

分别为设置文档与内容的距离

margin属性

为了设置边缘与内容的距离

margin: const EdgeInsets.all(10.0),
margin:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),

分别为设置全边与个·边的距离

decoration属性

主要的功能是设置背景和边框，为内容添加颜色和边框颜色

decoration:new BoxDecoration(
),

gradient：设置渐变色

gradient:const LinearGradient(
      colors:[Colors.lightBlue,Colors.greenAccent,Colors.purple]
    ),

border：设置边框

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

end

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'Text widget',
        home:Scaffold(
          body:Center(
          child:Container(
            child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
            alignment: Alignment.topLeft,
            width:500.0,
            height:400.0,
            padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),
            margin: const EdgeInsets.all(10.0),
            decoration:new BoxDecoration(
              gradient:const LinearGradient(
                colors:[Colors.lightBlue,Colors.greenAccent,Colors.purple]
              ),
              border:Border.all(width:2.0,color:Colors.red)
            ),
          ),
          ),
        ),
      );
  }
}