flutter學習--Container容器組件

Alignment屬性

bottomCenter:下部居中對齊。
botomLeft: 下部左對齊。
bottomRight：下部右對齊。
center：縱橫雙向居中對齊。
centerLeft：縱向居中橫向居左對齊。
centerRight：縱向居中橫向居右對齊。
topLeft：頂部左側對齊。
topCenter：頂部居中對齊。
topRight： 頂部居左對齊。

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.center,
           ),
          ),
        ),
      );
  }
}

設置寬、高和顏色屬性

child:Container(
  child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
  alignment: Alignment.center,
  width:500.0,
  height:400.0,
  color: Colors.lightBlue,
),

padding屬性

padding:const EdgeInsets.all(10.0),

設置上邊距爲30，左邊距爲10

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

margin屬性

把container的外邊距設置爲10個單位

child:Container(
  child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
  alignment: Alignment.topLeft,
  width:500.0,
  height:400.0,
  color: Colors.lightBlue,
  padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),
  margin: const EdgeInsets.all(10.0),
),

decoration屬性

decoration是 container 的修飾器，主要的功能是設置背景和邊框。

比如你需要給背景加入一個漸變，這時候需要使用BoxDecoration這個類，代碼如下（需要注意的是如果你設置了decoration，就不要再設置color屬性了，因爲這樣會衝突）。

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]
    )
  ),
),

設置邊框

設置邊框可以在decoration裏設置border屬性，比如你現在要設置一個紅色邊框，寬度爲2

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