Flutter 布局常用的 widgets（Common layout widgets）

簡單列舉總結一下常用的布局widget。
Flutter有豐富的layout組件庫。其中有一些是常用庫。
下面的widget分為兩類：標準組件和來自Material Components的特殊組件。
只有Material App能夠使用Material Components的組件。

標準組件 - Standard widgets

  • Container
    • 給一個組件添加 padding, margins, 邊界（borders）, 背景顏色或其它裝飾（decorations）。
  • GridView
    • 將多個widget放在一個可滑動的表格中。
  • ListView
    • 將多個widget放在一個可滑動的列表中。
  • Stack
    • 在一個widget上面蓋上另一個widget。

Material Components

  • Card
    • 將一些相近的信息裝進一個有圓角和陰影的盒子里。
  • ListTile
    • 一個Row中裝載最多3行文字；可選則在前面或尾部添加圖標。

Container

Container用法比較自由。可以把整個layout放進container里面，然后改變背景顏色或圖片。

Container 小結:

  • 添加 padding, margins, 和邊界（borders）
  • 能夠更好背景顏色和圖片
  • 包含一個單獨的子widget，這個子widget可以是Row、Column或一個widget樹的根widget
container結構

測試代碼widgetdemo/container_page.dart

import 'package:flutter/material.dart';
import 'package:demo_flutter/widgetdemo/container_page.dart';
// 引入自定義的包......

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Container demo 1',
      theme: new ThemeData(primarySwatch: Colors.brown),
      home: new ContainerDemoPage(), // 這里換上想要測試的界面
    );
  }
}

widgetdemo/container_page.dart代碼

import 'package:flutter/material.dart';

/// container示例界面
class ContainerDemoPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _ContainerDemoPageState();
}

class _ContainerDemoPageState extends State<ContainerDemoPage> {
  @override
  Widget build(BuildContext context) {
    Expanded imageExpanded(String img) {
      return new Expanded(child: new Container(
        decoration: new BoxDecoration(
            border: new Border.all(width: 10.0, color: Colors.black38),
            borderRadius: const BorderRadius.all(
                const Radius.circular(8.0))),
        margin: const EdgeInsets.all(4.0),
        child: new Image.asset(img),
      ));
    }

    var container = new Container(
      decoration: new BoxDecoration(color: Colors.black26),
      child: new Column(
        children: <Widget>[
          new Row(children: <Widget>[
            imageExpanded('images/c1.jpg'),
            imageExpanded('images/c2.jpg'),
          ],),
          new Row(children: <Widget>[
            imageExpanded('images/d1.jpg'),
            imageExpanded('images/d2.jpg'),
          ],),
          new Row(children: <Widget>[
            imageExpanded('images/p1.jpg'),
          ],)
        ],
      ),
    );

    return new Scaffold(
      appBar: new AppBar(title: new Text('Container Page demo'),),
      body: new Center(
        child: container,
      ),
    );
  }
}
container示例

GridView

用GridView來將widget放入一個2維的列表中。
GridView提供了2個預裝配好的列表，也可以自己建立自定義列表。
GridView支持滾動。

GridView 小結:

  • 將多個widget放進一個表格中
  • 當超出渲染范圍時，自動提供滾動功能
  • 可自定義格子，也可用下面提供的2種
    • GridView.count 指定列的數目
    • GridView.extent 允許指定子項的最大像素寬度

示例1 - 用GridView.extent

GridView.extent指定子項占據的最大寬度

import 'package:flutter/material.dart';

/// gridView示例界面1
class GridDemo1Page extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _GridDemo1PageState();
}

class _GridDemo1PageState extends State<GridDemo1Page> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text('Grid Page 1 demo'),),
      body: new Center(
        child: buildGrid(),
      ),
    );
  }

  List<Container> _buildGridTileList(int count) {
    return new List<Container>.generate(count, (int index) =>
    new Container(child: new Image.asset('images/pic${index + 1}.jpg'),));
  }

  Widget buildGrid() {
    return new GridView.extent(
      maxCrossAxisExtent: 150.0,
      padding: const EdgeInsets.all(4.0),
      mainAxisSpacing: 4.0,
      crossAxisSpacing: 4.0,
      children: _buildGridTileList(30),);
  }
}
用GridView.extent

示例2 - 用GridView.count

crossAxisCount設為2，分成2列。

  Widget buildGrid() {
    var countGrid = GridView.count(
      crossAxisCount: 2,
      mainAxisSpacing: 4.0,
      crossAxisSpacing: 4.0,
      padding: const EdgeInsets.all(4.0),
      childAspectRatio: 1.3,
      children: _buildGridTileList(30),
    );
    return countGrid;
  }
GridView.count示例

ListView

ListView能以列的形式展示數據。當內容超過渲染范圍時，自動提供滾動的功能。

ListView 小結

  • 把子視圖裝進列表中
  • 水平或豎直都可以
  • 支持滑動
  • 相比于Column，可選配置比較少，但更易用并且支持滑動

和Android中的ListView差別不大

示例1

把ListTile當做子項來裝載數據。

import 'package:flutter/material.dart';

class ListViewPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _ListViewPageState();
}

class _ListViewPageState extends State<ListViewPage> {

  @override
  Widget build(BuildContext context) {
    List<Widget> list = <Widget>[];
    for (int i = 0; i < 30; i++) {
      list.add(new ListTile(
        title: new Text('title$i', style: _itemTextStyle,),
        subtitle: new Text('A'),
        leading: i % 3 == 0
            ? new Icon(Icons.theaters, color: Colors.blue,)
            : new Icon(Icons.restaurant, color: Colors.blue,),
      ));
    }
    return new Scaffold(
      appBar: new AppBar(title: new Text('ListView Demo'),),
      body: new Center(child: new ListView(children: list,),),
    );
  }
}

TextStyle _itemTextStyle = new TextStyle(
    fontWeight: FontWeight.w500, fontSize: 14.0);
ListView參考效果圖1

另外可以參考 https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/colors_demo.dart

Stack

使用Stack在widget之上顯示另一些widget，通常用來顯示圖片。
顯示的widget可以完全地把底部widget蓋住。

Stack 小結:

  • 用來在當前widget上面再蓋上一層widget
  • Stack children中的第一個widget放在最下，后面的widget會一層層蓋上去
  • Stack的內容不支持滾動
  • 可以裁剪超出范圍的子widget

Stack示例1

顯示一個CircleAvatar

import 'package:flutter/material.dart';

class StackPage1 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _StackPage1State();
}

class _StackPage1State extends State<StackPage1> {

  @override
  Widget build(BuildContext context) {
    var stack = new Stack(
      alignment: const Alignment(0.6, 0.6),
      children: <Widget>[
        new CircleAvatar(
          backgroundImage: new AssetImage('images/android_1.jpg'),
          radius: 100.0,),
        new Container(decoration: new BoxDecoration(color: Colors.black45),
          child: new Text(
            'Android Avatar', style: new TextStyle(color: Colors.white70),),),
        new Container(decoration: new BoxDecoration(color: Colors.transparent),
          padding: const EdgeInsets.fromLTRB(0.0, 0.0, 100.0, 0.0),
          child: new CircleAvatar(
            backgroundImage: new AssetImage('images/p_box1.png'),
            backgroundColor: Colors.transparent,
            radius: 10.0,),),
      ],
    );
    return new Scaffold(
      appBar: new AppBar(title: new Text('Stack Demo 1'),),
      body: new Center(child: stack,),
    );
  }
}
Stack示例1

Card

Card來自Material組件庫，可包含一些數據，通常用ListTile來組裝。Card只有一個子widget，可以是column、row、list、grid或其它組合widget。
默認情況下，Card把自己的尺寸縮小為0像素。可以用SizedBox來指定card的尺寸。

Flutter中的Card有圓角和陰影效果。修改elevation可改變陰影效果。

elevation取值范圍，參考 Elevation and Shadows

若設置的范圍外的值，陰影效果會消失。

Card 小結:

  • 實現了Material Design card
  • 用于展示相關的數據
  • 有一個子項（child），可以是column、row、list、grid或其它組合widget
  • 有圓角和陰影效果
  • 不支持滾動

Card示例1

將前面的ListView示例修改一下

import 'package:flutter/material.dart';

class ListViewPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _ListViewPageState();
}

class _ListViewPageState extends State<ListViewPage> {

  @override
  Widget build(BuildContext context) {
    List<Widget> list = <Widget>[];
    for (int i = 0; i < 30; i++) {
      list.add(new Card(child: new Column(
        children: <Widget>[
          new Image.asset(
            'images/pic${i + 1}.jpg',),
          new ListTile(
            title: new Text('title$i', style: _itemTextStyle,),
            subtitle: new Text('A'),
            leading: i % 3 == 0
                ? new Icon(Icons.theaters, color: Colors.blue,)
                : new Icon(Icons.restaurant, color: Colors.blue,),
          ),
        ],
      ),));
    }
    return new Scaffold(
      appBar: new AppBar(title: new Text('ListView Demo'),),
      body: new Center(child: new ListView(children: list,),),
    );
  }
}

TextStyle _itemTextStyle = new TextStyle(
    fontWeight: FontWeight.w500, fontSize: 14.0);
Card示例1

ListTile

來自Material組件庫的橫向組件。可自定義3行文字及其可選的頭尾圖標。
此控件常與Card或ListView一起用。

ListTile 小結:

  • 可定制3行帶圖標的文字
  • 相比于Row，配置更少，但更易用

加一個主界面

放置一些按鈕，點擊跳轉到相應的界面。
使用Navigator.of(context).pushNamed(routeName)來跳轉。

import 'package:flutter/material.dart';
import 'package:demo_flutter/widgetdemo/container_page.dart';
import 'package:demo_flutter/widgetdemo/grid_page.dart';
import 'package:demo_flutter/widgetdemo/listview_demo.dart';
import 'package:demo_flutter/widgetdemo/stack_page1.dart';
import 'package:demo_flutter/widgetdemo/button_page.dart';

const String CONTAINER_DEMO_PAGE = '/a';

void main() {
  runApp(new MaterialApp(
    home: new HomePage(),
    routes: {
      CONTAINER_DEMO_PAGE: (BuildContext context) => new ContainerDemoPage(),
      '/b': (BuildContext context) => new GridDemo1Page(),
      '/c': (BuildContext context) => new ListViewPage(),
      '/d': (BuildContext context) => new StackPage1(),
      '/e': (BuildContext context) => new ButtonPage(),
    },
  ));
}

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    getGestureDetector(String routeName, String content) {
      return new GestureDetector (
        onTap: () {
          Navigator.of(context).pushNamed(routeName);
        },
        child: new Container (
            padding: EdgeInsets.all(20.0),
            child: new Center(child: new Text (content),)),
      );
    }
    return new Scaffold(
      appBar: new AppBar(title: new Text('Home'),),
      body: new Column(children: <Widget>[
        getGestureDetector(CONTAINER_DEMO_PAGE, 'Container Demo'),
        getGestureDetector('/b', 'Grid Demo 1'),
        getGestureDetector('/c', 'ListView Demo'),
        getGestureDetector('/d', 'Stack Demo'),
        getGestureDetector('/e', 'Button Page'),
      ],),
    );
  }

}
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • afinalAfinal是一個android的ioc，orm框架 https://github.com/yangf...
    passiontim閱讀 15,489評論 2贊 45
  • afinalAfinal是一個android的ioc，orm框架 https://github.com/yangf...
    wgl0419閱讀 6,322評論 1贊 9
  • App Core Account Realm Google Android
    Jacinth閱讀 850評論 0贊 0
  • 唯有星空浩瀚的夜晚 最適合靜靜的思念 那種淡淡的感覺 就著茶杯里散發出來的香氣 吸入了藏污納垢的肺里 夜晚沒有露珠...
    年輪止閱讀 312評論 2贊 5
  • 秋月新牙如玉嬰，夕陽燒云錦天穹。 莫聽夏蟬鼓瑟聲，鴻雁清鳴唱漁晚。 一杯濁酒一孤笛，哀轉三調哭潛蛟。萬物如水月既逝...
    木易當興閱讀 327評論 2贊 2