Flutter常用布局組件

Flutter控件本身通常由許多小型、單用途的控件組成，結合起來產生強大的效果，例如，Container是一種常用的控件，由負責布局、繪畫、定位和大小調整的幾個控件組成，具體來說，Container是由LimitedBox、ConstrainedBox、 Align、Padding、DecoratedBox和Transform控件組成，而不是將Container子類化來產生自定義效果，您可以用這種新穎的方式組合這些以及其他簡單的控件。

類的層次結構是扁平的，以最大化可能的組合數量。

在寫應用程序時，經常會使用StatelessWidget和StatefulWidget編寫新控件，兩者的差別在於你是否要管理控件的狀態。一個控件的主要任務是實現build函數，定義控件中其他較低層次的控件。build函數將依次構建這些控件，直到底層渲染對象。

基本組件

Container

容器，一個常用的控件，由基本的繪制、位置和大小控件組成。負責創建矩形的可視元素，可以用BoxDecoration來設計樣式，比如背景、邊框和陰影，Container也有邊距、填充和大小限制，另外，還可以在三維空間利用矩陣進行變換。

沒有子控件的容器盡可能大，除非傳入的大小約束是無限的，在這種情況下，它們盡可能小。有子控件的容器將自己的尺寸給他們的孩子。我們可以通過width、height和 constraints屬性控制size。

new Container(
  constraints: new BoxConstraints.expand(
    height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
  ),
  padding: const EdgeInsets.all(8.0),
  color: Colors.teal.shade700,
  alignment: Alignment.center,
  child: new Text('Hello World', style: Theme.of(context).textTheme.display1.copyWith(color: Colors.white)),
  foregroundDecoration: new BoxDecoration(
    image: new DecorationImage(
      image: new NetworkImage('https://www.example.com/images/frame.png'),
      centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
    ),
  ),
  transform: new Matrix4.rotationZ(0.1),
)

 

Row

flex水平布局控件，能夠將子控件水平排列，是基於Web的flexbox的布局模式設計的。

Row子控件有靈活與不靈活的兩種，Row首先列出不靈活的子控件，減去它們的總寬度，計算還有多少可用的空間。然后Row按照Flexible.flex屬性確定的比例在可用空間中列出靈活的子控件。要控制靈活子控件，需要使用Expanded控件。

注意該控件不支持滑動，如果子控件超過剩余空間，會報錯，如果想支持水平滑動，考慮使用ListView。

如果只有一個子控件，可以使用 Align or Center控件定義該子控件位置。

new Row(
  children: <Widget>[
    new Expanded(
      child: new Text('Deliver features faster', textAlign: TextAlign.center),
    ),
    new Expanded(
      child: new Text('Craft beautiful UIs', textAlign: TextAlign.center),
    ),
    new Expanded(
      child: new FittedBox(
        fit: BoxFit.contain, // otherwise the logo will be tiny
        child: const FlutterLogo(),
      ),
    ),
  ],
)

 

Column

flex垂直布局控件，能夠將子控件垂直排列。

用法與Row控件一樣。

new Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    new Text('We move under cover and we move as one'),
    new Text('Through the night, we have one shot to live another day'),
    new Text('We cannot let a stray gunshot give us away'),
    new Text('We will fight up close, seize the moment and stay in it'),
    new Text('It’s either that or meet the business end of a bayonet'),
    new Text('The code word is ‘Rochambeau,’ dig me?'),
    new Text('Rochambeau!', style: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 2.0)),
  ],
)

 

Image

顯示圖像的控件，Image控件有多種構造函數：

• new Image，用於從ImageProvider獲取圖像。

• new Image.asset，用於使用key從AssetBundle獲取圖像。

• new Image.network，用於從URL地址獲取圖像。

• new Image.file，用於從File獲取圖像。

為了自動執行像素密度感知資源分辨率，使用AssetImage指定圖像，需要確保在控件樹中的圖片控件上方存在MaterialApp、WidgetsApp和MediaQuery控件。

不同的手機有不同的像素比率，這時就需要根據手機的像素比率來加載不同圖片，做法很簡單，只需要在圖片同級目錄下創建2.0x/…和3.0x/…的目錄就可以了。

我們在pubspec.yaml這個文件里指定本地圖片路徑

# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg

 

Text

用來顯示文本的控件

下面的實例有7個不同樣式的文本控件：

import 'package:flutter/material.dart';
class TextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('文本控件'),
      ),
      body: new Column(
        children: <Widget>[
          new Text(
            '紅色+黑色刪除線+25號',
            style: new TextStyle(
              color: const Color(0xffff0000),
              decoration: TextDecoration.lineThrough,
              decorationColor: const Color(0xff000000),
              fontSize: 25.0,
            ),
          ),
          new Text(
            '橙色+下划線+24號',
            style: new TextStyle(
              color: const Color(0xffff9900),
              decoration: TextDecoration.underline,
              fontSize: 24.0,
            ),
          ),
          new Text(
            '虛線上划線+23號+傾斜',
            style: new TextStyle(
              decoration: TextDecoration.overline,
              decorationStyle: TextDecorationStyle.dashed,
              fontSize: 23.0,
              fontStyle: FontStyle.italic,
            ),
          ),
          new Text(
            'serif字體+24號',
            style: new TextStyle(
              fontFamily: 'serif',
              fontSize: 26.0,
            ),
          ),
          new Text(
            'monospace字體+24號+加粗',
            style: new TextStyle(
              fontFamily: 'monospace',
              fontSize: 24.0,
              fontWeight: FontWeight.bold,
            ),
          ),
          new Text(
            '天藍色+25號+2行跨度',
            style: new TextStyle(
              color: const Color(0xff4a86e8),
              fontSize: 25.0,
              height: 2.0,
            ),
          ),
          new Text(
            '24號+2個字母間隔',
            style: new TextStyle(
              fontSize: 24.0,
              letterSpacing: 2.0,
            ),
          ),
        ]
      ),
    );
  }
}
void main() {
  runApp(
    new MaterialApp(
      title: 'Flutter教程',
      home: new TextDemo(),
    ),
  );
}

 

 

Icon

圖標控件，按照IconData中所描述的規則繪制，如Material中預定義的IconDatas。

該控件不可交互，要實現可交互的圖標，可以考慮使用Material中的 IconButton。

該控件必須在 Directionality控件里使用，通常這是由WidgetsApp或 MaterialApp自動引入的。

詳見：https://docs.flutter.io/flutter/widgets/Icon-class.html

RaisedButton

Material Design 風格的浮動按鈕，以方形紙片樣式懸停在界面上，點擊后會產生墨水擴散效果。

避免在dialog和card控件里使用，一般彈出式的控件建議使用扁平化按鈕，減少布局層次疊加。

使用時，要實現onPressed回調方法，否則按鈕處於禁用狀態，默認顯示disabledColor樣式的扁平化按鈕，並且此時更改按鈕的顏色不會生效。

注意該控件的父控件必須是Material控件。

如果你只需要點擊后產生墨水擴散效果，但不想使用按鈕，請考慮直接使用InkWell控件。

如有必要，該按鈕將拉伸以適應子控件大小。

詳見：https://docs.flutter.io/flutter/material/RaisedButton-class.html

Scaffold

Scaffold 實現了基本的Material Design布局結構。也就是說， MaterialApp 的 child 是 Scaffold Widget。

在Material設計中定義的單個界面上的各種布局元素，在 Scaffold 中都有支持，比如 左邊欄（Drawers）、snack bars、以及 bottom sheets。

Scaffold 有下面幾個主要屬性：

• appBar：顯示在界面頂部的一個 AppBar，也就是 Android 中的 ActionBar 、Toolbar

• body：當前界面所顯示的主要內容 Widget

• floatingActionButton：Material設計中所定義的 FAB，界面的主要功能按鈕

• persistentFooterButtons：固定在下方顯示的按鈕，比如對話框下方的確定、取消按鈕

• drawer：側邊欄控件

• backgroundColor： 內容的背景顏色，默認使用的是 ThemeData.scaffoldBackgroundColor 的值

• bottomNavigationBar： 顯示在頁面底部的導航欄

• resizeToAvoidBottomPadding：類似於 Android 中的 android:windowSoftInputMode=”adjustResize”，控制界面內容 body 是否重新布局來避免底部被覆蓋了，比如當鍵盤顯示的時候，重新布局避免被鍵盤蓋住內容。默認值為 true。

顯示 snackbar 或者 bottom sheet 的時候，需要使用當前的 BuildContext 參數調用 Scaffold.of 函數來獲取 ScaffoldState 對象，然后使用 ScaffoldState.showSnackBar 和 ScaffoldState.showBottomSheet 函數來顯示。

要特別注意 Scaffold.of 的參數 BuildContext， 如果包含該 BuildContext 的 Widget 是 Scaffold 的父 Widget，則 Scaffold.of 是無法查找到對應的 ScaffoldState 對象的，Scaffold.of 返回的是父對象中最近的 Scaffold 中的 ScaffoldState 對象。 比如，如果在 Scaffold 的 build 函數中，使用 build 的 BuildContext 參數是可以的：

@override
Widget build(BuildContext context) {
  return new RaisedButton(
    child: new Text('SHOW A SNACKBAR'),
    onPressed: () {
      Scaffold.of(context).showSnackBar(new SnackBar(
        content: new Text('Hello!'),
      ));
    },
  );
}

 

 

如果 build 函數返回一個 Scaffold 對象，則由於 Scaffold 對象是這個 Widget 的子對象，所以使用這個 build 的 BuildContext 參數是不能查找到 ScaffoldState 對象的，這個時候，通過在 Scaffold 中使用一個 Builder 來提供一個新的 BuildConext ：

@override
Widget build(BuildContext context) {
  return new Scaffold(
    appBar: new AppBar(
      title: new Text('Demo')
    ),
    body: new Builder(
      // Create an inner BuildContext so that the onPressed methods
      // can refer to the Scaffold with Scaffold.of().
      builder: (BuildContext context) {
        return new Center(
          child: new RaisedButton(
            child: new Text('SHOW A SNACKBAR'),
            onPressed: () {
              Scaffold.of(context).showSnackBar(new SnackBar(
                content: new Text('Hello!'),
              ));
            },
          ),
        );
      },
    ),
  );
}

 

另外還可以把 build 函數中的 Widget 分別創建，分別引入新的 BuildContext 來獲取 Scaffold。

Appbar

AppBar 和 SliverAppBar 是Material Design中的 App Bar，也就是 Android 中的 Toolbar，關於 Toolbar 的設計指南請參考Material Design中 Toolbar 的內容。

AppBar 和 SliverAppBar 都是繼承StatefulWidget 類，都代表 Toobar，二者的區別在於 AppBar 位置的固定的應用最上面的；而 SliverAppBar 是可以跟隨內容滾動的。

他們的主要屬性如下：

• leading：在標題前面顯示的一個控件，在首頁通常顯示應用的 logo；在其他界面通常顯示為返回按鈕

• title： Toolbar 中主要內容，通常顯示為當前界面的標題文字

• actions：一個 Widget 列表，代表 Toolbar 中所顯示的菜單，對於常用的菜單，通常使用 IconButton 來表示；對於不常用的菜單通常使用 PopupMenuButton 來顯示為三個點，點擊后彈出二級菜單

• bottom：一個 AppBarBottomWidget 對象，通常是 TabBar。用來在 Toolbar 標題下面顯示一個 Tab 導航欄

• elevation：紙墨設計中控件的 z 坐標順序，默認值為 4，對於可滾動的 SliverAppBar，當 SliverAppBar 和內容同級的時候，該值為 0， 當內容滾動 SliverAppBar 變為 Toolbar 的時候，修改 elevation 的值 
  flexibleSpace：一個顯示在 AppBar 下方的控件，高度和 AppBar 高度一樣，可以實現一些特殊的效果，該屬性通常在 SliverAppBar 中使用

• backgroundColor：APP bar 的顏色，默認值為 ThemeData.primaryColor。改值通常和下面的三個屬性一起使用

• brightness：App bar 的亮度，有白色和黑色兩種主題，默認值為 ThemeData.primaryColorBrightness

• iconTheme：App bar 上圖標的顏色、透明度、和尺寸信息。默認值為 ThemeData.primaryIconTheme

• textTheme： App bar 上的文字樣式。默認值為 ThemeData.primaryTextTheme

• centerTitle： 標題是否居中顯示，默認值根據不同的操作系統，顯示方式不一樣

import 'package:flutter/material.dart';

class AppBarBottomSample extends StatefulWidget {
  @override
  _AppBarBottomSampleState createState() => new _AppBarBottomSampleState();
}

class _AppBarBottomSampleState extends State<AppBarBottomSample> with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(vsync: this, length: choices.length);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  void _nextPage(int delta) {
    final int newIndex = _tabController.index + delta;
    if (newIndex < 0 || newIndex >= _tabController.length)
      return;
    _tabController.animateTo(newIndex);
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: const Text('AppBar Bottom Widget'),
          leading: new IconButton(
            tooltip: 'Previous choice',
            icon: const Icon(Icons.arrow_back),
            onPressed: () { _nextPage(-1); },
          ),
          actions: <Widget>[
            new IconButton(
              icon: const Icon(Icons.arrow_forward),
              tooltip: 'Next choice',
              onPressed: () { _nextPage(1); },
            ),
          ],
          bottom: new PreferredSize(
            preferredSize: const Size.fromHeight(48.0),
            child: new Theme(
              data: Theme.of(context).copyWith(accentColor: Colors.white),
              child: new Container(
                height: 48.0,
                alignment: Alignment.center,
                child: new TabPageSelector(controller: _tabController),
              ),
            ),
          ),
        ),
        body: new TabBarView(
          controller: _tabController,
          children: choices.map((Choice choice) {
            return new Padding(
              padding: const EdgeInsets.all(16.0),
              child: new ChoiceCard(choice: choice),
            );
          }).toList(),
        ),
      ),
    );
  }
}

class Choice {
  const Choice({ this.title, this.icon });
  final String title;
  final IconData icon;
}

const List<Choice> choices = const <Choice>[
  const Choice(title: 'CAR', icon: Icons.directions_car),
  const Choice(title: 'BICYCLE', icon: Icons.directions_bike),
  const Choice(title: 'BOAT', icon: Icons.directions_boat),
  const Choice(title: 'BUS', icon: Icons.directions_bus),
  const Choice(title: 'TRAIN', icon: Icons.directions_railway),
  const Choice(title: 'WALK', icon: Icons.directions_walk),
];

class ChoiceCard extends StatelessWidget {
  const ChoiceCard({ Key key, this.choice }) : super(key: key);

  final Choice choice;

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.display1;
    return new Card(
      color: Colors.white,
      child: new Center(
        child: new Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            new Icon(choice.icon, size: 128.0, color: textStyle.color),
            new Text(choice.title, style: textStyle),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(new AppBarBottomSample());
}

 

 

FlutterLogo

定義flutter應用的logo，該控件受IconTheme約束。

import 'package:flutter/material.dart';

void main() {
  runApp(new FadeAppTest());
}

class FadeAppTest extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Fade Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyFadeTest(title: 'Fade Demo'),
    );
  }
}

class MyFadeTest extends StatefulWidget {
  MyFadeTest({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyFadeTest createState() => new _MyFadeTest();
}

class _MyFadeTest extends State<MyFadeTest> with TickerProviderStateMixin {
  AnimationController controller;
  CurvedAnimation curve;

  @override
  void initState() {
    controller = new AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
    curve = new CurvedAnimation(parent: controller, curve: Curves.easeIn);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
          child: new Container(
              child: new FadeTransition(
                  opacity: curve,
                  child: new FlutterLogo(
                    size: 100.0,
                  )))),
      floatingActionButton: new FloatingActionButton(
        tooltip: 'Fade',
        child: new Icon(Icons.brush),
        onPressed: () {
          controller.forward();
        },
      ),
    );
  }
}

 

Placeholder

占位控件，該控件繪制一個框，表示將來會在該位置添加其他控件。

這個控件在開發過程中很有用，可提示該處接口還沒完成。

默認情況下，控件的大小自適應其容器。如果該控件處於無界空間，它將根據給定的fallbackWidth和fallbackHeight自行調整大小。

詳見：https://docs.flutter.io/flutter/widgets/Placeholder-class.html

Flutter和原生Android控件對比

Flutter控件	Android控件
AppBar	ActionBar/ToolBar
ListView	ListView/RecyclerView
Text	TextView
Center	ViewGroup
Container	RelativeLayout
FloatingActionButton	FloatingActionButton(design庫里面的)
BottomNavigationBar	BottomNavigation(design庫里面的)
RaisedButton/Button	Button
Column	LinearLayout的android:orientation="vertical"
Row	android:orientation="horizontal"
DecorationImage	ImageView
Image	ImageView
Stack	FrameLayout/RelativeLayout
Algin	alginParentXXX屬性
resizeToAvoidBottomPadding	android:windowSoftInputMode=”adjustResize屬性
SingleChildScrollView	ScrollView
CustomScrollerView	Recyclerview

---

Image里面的BoxFit參數介紹：（相當於Android的ImageView的scaleType參數）

// fill 通過篡改原始寬高比來填充目標box

/// contain 在盡可能大的情況下，仍然將源完全包含在目標框中。

/// cover 盡可能小，同時仍然覆蓋整個目標框。

/// fitWidth 確保顯示源的全部寬度，而不管這是否意味着源垂直溢出目標框。

/// fitHeight 確保顯示源的全部高度，而不管這是否意味着源水平地溢出目標框。

/// none 在目標框中對齊源（默認為居中），並放棄位於框外的源的任何部分。源圖像未調整大小。

/// scaleDown 在目標框中對齊源(默認為居中)，如果需要，將源縮小以確保源適合該框。這與contain的內容相同，如果該內容會收縮圖像，那么它就是none。