Flutter學習筆記（22）--單個子元素的佈局Widget（Container、Padding、Center、Align、FittedBox、Offstage、LimitedBox、Over...

如需轉載，請註明出處：Flutter學習筆記（22）--單個子元素的佈局Widget（Container、Padding、Center、Align、FittedBox、Offstage、LimitedBox、OverflowBox、SizedBox）

入門學習Flutter有一段時間了，Demo用過的Widget也有很多，想着總體的梳理一下，因此今天結合Flutter中文網和書籍梳理一下Widget的使用，首先梳理一下擁有單個子元素的佈局Widget。

• Container：一個擁有繪製、定位、調整大小的Widget
• Padding：一個Widget，會給其子Widget添加指定的填充
• Center：將其子Widget居中顯示在自身內部的Widget
• Align：一個WIdget，它能夠將其子Widget對其，並能夠根據子Widget的大小自動調整大小
• FittedBox：按本身的大小調整其子Widget的大小和位置
• Baseline：根據子項的基準線對它們的位置進行定位的Widget
• Offstage：一個佈局Widget，能夠控制其子Widget的顯示和隱藏
• LimitedBox：一個當其自身不受約束時才限制其大小的盒子
• OverflowBox：對其子項施加不一樣約束的Widget，它可能容許子項溢出父級
• SizedBox：一個特定大小的盒子，這個Widget強制它的孩子有一個特性的寬度和高度。若是寬度或高度爲Null，則此Widget將調整自身大小以匹配該維度中的孩子的大小

接下來就是按照上面列出來的Widget，一個一個寫Demo，每一個Demo裏面會有註釋，還會附上效果截圖

 

• Container

import 'package:flutter/material.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget{ @override Widget build(BuildContext context) { return new MaterialApp( title: 'child demo', home: new Scaffold( appBar: AppBar( title: new Text('child demo'), ), body: new _containerDemo(), ), ); } } class _containerDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Container( width: 300.0, height: 200.0, // color: Colors.cyan,
      margin: EdgeInsets.only(left: 20.0,top: 10.0,right: 0,bottom: 0), decoration: new BoxDecoration( color: Colors.green,//填充色
          border: new Border.all( color: Colors.deepOrange,//邊框顏色
 ), borderRadius: BorderRadius.all(Radius.circular(10.0))//圓角大小
 ), ); } }

 

• Padding

 

import 'package:flutter/material.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget{ @override Widget build(BuildContext context) { return new MaterialApp( title: 'child demo', home: new Scaffold( appBar: AppBar( title: new Text('child demo'), ), body: new _containerDemo(), ), ); } } class _paddingDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Padding( padding: EdgeInsets.all(30.0), child: new Card( color: Colors.pink, ), ); } } class _containerDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Container( width: 300.0, height: 200.0, // color: Colors.cyan,
      margin: EdgeInsets.only(left: 20.0,top: 10.0,right: 0,bottom: 0), decoration: new BoxDecoration( color: Colors.green,//填充色
          border: new Border.all( color: Colors.deepOrange,//邊框顏色
 ), borderRadius: BorderRadius.all(Radius.circular(10.0))//圓角大小
 ), child: new _paddingDemo(), ); } } class _centerDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Center( child: Text('Center Demo'), ); } }

 

• Center

import 'package:flutter/material.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget{ @override Widget build(BuildContext context) { return new MaterialApp( title: 'child demo', home: new Scaffold( appBar: AppBar( title: new Text('child demo'), ), body: new _containerDemo(), ), ); } } class _containerDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Container( width: 300.0, height: 200.0, // color: Colors.cyan,
      margin: EdgeInsets.only(left: 20.0,top: 10.0,right: 0,bottom: 0), decoration: new BoxDecoration( color: Colors.green,//填充色
          border: new Border.all( color: Colors.deepOrange,//邊框顏色
 ), borderRadius: BorderRadius.all(Radius.circular(10.0))//圓角大小
 ), child: new _centerDemo(), ); } } class _centerDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Center( child: Text('Center Demo'), ); } }

 

• Align

import 'package:flutter/material.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget{ @override Widget build(BuildContext context) { return new MaterialApp( title: 'child demo', home: new Scaffold( appBar: AppBar( title: new Text('child demo'), ), body: new _containerDemo(), ), ); } } class _containerDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Container( width: 300.0, height: 200.0, // color: Colors.cyan,
      margin: EdgeInsets.only(left: 20.0,top: 10.0,right: 0,bottom: 0), decoration: new BoxDecoration( color: Colors.green,//填充色
          border: new Border.all( color: Colors.deepOrange,//邊框顏色
 ), borderRadius: BorderRadius.all(Radius.circular(10.0))//圓角大小
 ), child: new _alignDemo(), ); } } class _alignDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Stack( children: <Widget>[ new Align( child: new Text('align demo 1'), alignment: FractionalOffset.topLeft,//左上角
 ), new Align( child: new Text('align demo 2'), alignment: FractionalOffset.center,//水平、垂直方向居中
 ), new Align( child: new Text('align demo 3'), alignment: FractionalOffset.bottomRight,//右下角
 ), ], ); } }

 

• FittedBox

佈局行爲分兩種狀況：

1.若是外部有約束的話，按照外部約束調整自身尺寸，而後縮放調整child，按照指定的條件進行佈局。

2.若是外部沒有約束條件的話，則跟child尺寸一致，指定的縮放以及位置屬性將不起做用。

FittedBox有兩個重要屬性，fit和alignment

fit：縮放的方式，默認的屬性是BoxFit.Contain，child在FittedBox範圍內，儘量大，可是不會超出其尺寸，這裏須要注意一點，contain是在保持這child寬高比的大前提下，儘量的填滿，通常狀況下，寬度或高度達到最大值時，就會中止縮放。

BoxFit.none：沒有任何填充模式。

BoxFit.fill：所有覆蓋，不按照寬高比填充，內容不會超過容器範圍。

BoxFit.contain：按寬高比等比填充模式，內容不會超過容器範圍。

BoxFit.cover：按原始尺寸填充整個容器模式，內容有可能會超過容器。

BoxFit.width：按照內容寬度填充整個容器，內容不會超過容器。

BoxFit.height：按照內容高度填充整個容器，內容不會超過容器。

• Baseline

Baseline基準線是指將全部元素底部放在同一條水平線上。

import 'package:flutter/material.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget{ @override Widget build(BuildContext context) { return new MaterialApp( title: 'child demo', home: new Scaffold( appBar: AppBar( title: new Text('child demo'), ), body: new _baselineDemo(), ), ); } } class _baselineDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Row( children: <Widget>[ new Baseline( baseline: 100.0, baselineType: TextBaseline.ideographic, child: new Text('AaBbCcDd',style: TextStyle(fontSize: 30.0),), ), ], ); } }

 

• Offstage

Offstage的做用很簡單，經過一個參數來控制child是否顯示，也算是比較經常使用的組件

offstage屬性：默認爲true，表示不顯示，當爲false的時候，會顯示該組件

import 'package:flutter/material.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget{ @override Widget build(BuildContext context) { return new MaterialApp( title: 'child demo', home: new _offstageDemo() ); } } class _offstageDemo extends StatefulWidget { @override State<StatefulWidget> createState() { // TODO: implement createState
    return new _offstageDemoState(); } } class _offstageDemoState extends State { bool _offstage = false; @override Widget build(BuildContext context) { return new Scaffold( appBar: AppBar( title: new Text('child demo'), ), floatingActionButton: FloatingActionButton(onPressed: (){ setState(() { _offstage = !_offstage; }); }), body: new Center( child: new Offstage( offstage: _offstage, child: new Text('顯示和隱藏',style: TextStyle(fontSize: 40.0),), ), ), ); } }

 

• LimitedBox

 

import 'package:flutter/material.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget{ @override Widget build(BuildContext context) { return new MaterialApp( title: 'child demo', home: new Scaffold( appBar: AppBar( title: new Text('child demo'), ), body: new Row( children: <Widget>[ new Container( width: 100.0, color: Colors.blue, ), new LimitedBox( maxWidth: 100, child: new Container( color: Colors.pink, width: 300, ), ) ], ), ) ); } }

 

• OverflowBox

import 'package:flutter/material.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget{ @override Widget build(BuildContext context) { return new MaterialApp( title: 'child demo', home: new Scaffold( appBar: AppBar( title: new Text('child demo'), ), body: new Container( color: Colors.blue, width: 200, height: 200, padding: EdgeInsets.all(20.0), child: new OverflowBox( alignment: Alignment.topLeft, maxWidth: 200, maxHeight: 200, child: new Container( color: Colors.pink, ), ), ), ) ); } }

 

• SizedBox

SizedBox組件是一個特定大小的盒子，這個組件強制它的child有特定的寬度和高度，若是寬度和高度爲null，則此組件將調整自身的大小以匹配該維度中child的大小

import 'package:flutter/material.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget{ @override Widget build(BuildContext context) { return new MaterialApp( title: 'child demo', home: new Scaffold( appBar: AppBar( title: new Text('child demo'), ), body: new SizedBox( width: 200, height: 200, child: new Container( width: 100, height: 600, color: Colors.blue, ), ), ) ); } }

 

 以上就是單個子元素的佈局Widget的梳理，並非很全，我只是把我認爲在開發中可能會常常用到的Widget梳理了一下，也方便本身之後查看！！！

原文出處：https://www.cnblogs.com/upwgh/p/11401932.html