Flutter小知識

Container組件margin和padding屬性的區別:

Container(
  margin: EdgeInsets.all(20.0), //容器外補白
  color: Colors.orange,
  child: Text("Hello world!"),
),
Container(
  padding: EdgeInsets.all(20.0), //容器內補白
  color: Colors.orange,
  child: Text("Hello world!"),
),

可以發現，直觀的感覺就是margin的留白是在容器外部，而padding的留白是在容器內部，讀者需要記住這個差異。事實上，Container內margin和padding都是通過Padding 組件來實現的，上面的示例代碼實際上等價於：

...
Padding(
  padding: EdgeInsets.all(20.0),
  child: DecoratedBox(
    decoration: BoxDecoration(color: Colors.orange),
    child: Text("Hello world!"),
  ),
),
DecoratedBox(
  decoration: BoxDecoration(color: Colors.orange),
  child: Padding(
    padding: const EdgeInsets.all(20.0),
    child: Text("Hello world!"),
  ),
),
...

Navigator路由跳轉，在main.dart中是不起作用的，無法跳轉，需要另起一個子頁面，才能跳轉

如果不想用Container來寫外表樣式，可以利用DecoratedBox控件來代替，該控件是專門用來顯示樣式的控件

 DecoratedBox(
    decoration: BoxDecoration(
      gradient: LinearGradient(colors:[Colors.red,Colors.orange[700]]), //背景漸變
      borderRadius: BorderRadius.circular(3.0), //3像素圓角
      boxShadow: [ //陰影
        BoxShadow(
            color:Colors.black54,
            offset: Offset(2.0,2.0),
            blurRadius: 4.0
        )
      ]
    ),
  child: Padding(padding: EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
    child: Text("Login", style: TextStyle(color: Colors.white),),
  )
)

使容器佔滿整個屏幕的方法

方法一
使用ConstrainedBox控件

ConstrainedBox(
  constraints: BoxConstraints.expand(),		// 佔滿容器
  child: Stack(
    alignment:Alignment.center , 
    children: <Widget>[
      Container(child: Text("Hello world",style: TextStyle(color: Colors.white)),
        color: Colors.red,
      ),
      Positioned(
        left: 18.0,
        child: Text("I am Jack"),
      ),
      Positioned(
        top: 18.0,
        child: Text("Your friend"),
      )        
    ],
  ),
);

方法二
使用ListView控件包裹Container，Container會自動填滿全部

ListView(
	children<Widget>[
		Container(color:Colors.red)
	]
)

通過比例生成容器

性能優化

生成列表項的時候，或者生成Container頁面的時候，高度如果可以確定，最好寫一個固定值，這樣的話，性能消耗小