Flutter擁有豐富的布局widget，但(dàn)這(zhè)裏有一些(xiē)最常用(yòng)的布局widget。其目的是盡可能(néng)快(kuài)地讓您構建應用(yòng)并運行，而不是讓您淹沒在整個完整的widget列表中。
以下(xià)widget分爲兩類：widgets library中的标準widget和(hé)Material Components library中的專用(yòng)widget 。 任何應用(yòng)程序都可以使用(yòng)widgets library中的widget，但(dàn)隻有Material應用(yòng)程序可以使用(yòng)Material Components庫。
标準 widgets
Container添加 padding, margins, borders, background color, 或将其他(tā)裝飾添加到(dào)widget.
GridView将 widgets 排列爲可滾動的網格.
ListView将widget排列爲可滾動列表
Stack将widget重疊在另一個widget之上(shàng).
Material Components
Card将相關内容放(fàng)到(dào)帶圓角和(hé)投影的盒子中。
ListTile将最多3行文(wén)字，以及可選的行前和(hé)和(hé)行尾的圖标排成一行
Container
許多布局會(huì)自(zì)由使用(yòng)容器來(lái)使用(yòng)padding分隔widget，或者添加邊框（border）或邊距（margin）。您可以通過将整個布局放(fàng)入容器并更改其背景顔色或圖片來(lái)更改設備的背景。
Container 概要 :
添加padding, margins, borders
改變背景顔色或圖片
包含單個子widget，但(dàn)該子widget可以是Row，Column，甚至是widget樹的根
a diagram showing that margins, borders, and padding, that surround content in a container
Container 示例:
除了(le)下(xià)面的例子之外(wài)，本教程中的許多示例都使用(yòng)了(le)Container。 您還可以在Flutter Gallery中找到(dào)更多容器示例。
該布局中每個圖像使用(yòng)一個Container來(lái)添加一個圓形的灰色邊框和(hé)邊距。然後使用(yòng)容器将列背景顔色更改爲淺灰色。
Dart code: main.dart, snippet belowImages: imagesPubspec: pubspec.yaml
a screenshot showing 2 rows, each containing 2 images; the images have grey rounded borders, and the background is a lighter grey
class _MyHomePageState extends State
@override
Widget build(BuildContext context) {
var container = new Container(
decoration: new BoxDecoration(
color: Colors.black26,
),
child: new Column(
children: [
new Row(
children: [
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('images/pic1.jpg'),
),
),
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('images/pic2.jpg'),
),
),
],
),
],
),
);
//...
}
}
GridView
使用(yòng)GridView将widget放(fàng)置爲二維列表。 GridView提供了(le)兩個預制list，或者您可以構建自(zì)定義網格。當GridView檢測到(dào)其内容太長而不适合渲染框時(shí)，它會(huì)自(zì)動滾動。
GridView 概覽:
在網格中放(fàng)置widget
檢測列内容超過渲染框時(shí)自(zì)動提供滾動
構建您自(zì)己的自(zì)定義grid，或使用(yòng)一下(xià)提供的grid之一:GridView.count 允許您指定列數GridView.extent 允許您指定項的最大(dà)像素寬度
注意: 在顯示二維列表時(shí)，重要的是單元格占用(yòng)哪一行和(hé)哪一列時(shí)， 應該使用(yòng)Table或 DataTable。
GridView 示例:
a 3-column grid of photos
使用(yòng)GridView.extent 創建最大(dà)寬度爲150像素的網格Dart code: main.dart, snippet belowImages: imagesPubspec: pubspec.yaml
a 2 column grid with footers containing titles on a partially translucent background
使用(yòng)GridView.count 在縱向模式下(xià)創建兩個行的grid，并在橫向模式下(xià)創建3個行的網格。通過爲每個GridTile設置footer屬性來(lái)創建标題。Dart code: grid_list_demo.dart from the Flutter Gallery
// The images are saved with names pic1.jpg, pic2.jpg...pic30.jpg.
// The List.generate constructor allows an easy way to create
// a list when objects have a predictable naming pattern.
List
return new List
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));
}
class _MyHomePageState extends State
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: buildGrid(),
),
);
}
}
ListView
ListView是一個類似列的widget，它的内容對(duì)于其渲染框太長時(shí)會(huì)自(zì)動提供滾動。
ListView 摘要:
用(yòng)于組織盒子中列表的特殊Column
可以水(shuǐ)平或垂直放(fàng)置
檢測它的内容超過顯示框時(shí)提供滾動
比Column配置少，但(dàn)更易于使用(yòng)并支持滾動
ListView 示例:
a ListView containing movie theaters and restaurants
使用(yòng)ListView顯示多個ListTile的業務列表。分隔線将劇(jù)院與餐廳分開(kāi)
Dart code: main.dart, snippet belowIcons: Icons classPubspec: pubspec.yaml
a ListView containing shades of blue from the Material Design color palette
使用(yòng)ListView控件來(lái)顯示Material Design palette中的ColorsDart code: Flutter Gallery中的 colors_demo.dart
List
new ListTile(
title: new Text('CineArts at the Empire',
style: new TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),
subtitle: new Text('85 W Portal Ave'),
leading: new Icon(
Icons.theaters,
color: Colors.blue[500],
),
),
new ListTile(
title: new Text('The Castro Theater',
style: new TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),
subtitle: new Text('429 Castro St'),
leading: new Icon(
Icons.theaters,
color: Colors.blue[500],
),
),
];
class _MyHomePageState extends State
@override
Widget build(BuildContext context) {
return new Scaffold(
// ...
body: new Center(
child: new ListView(
children: list,
),
),
);
}
}
Stack
使用(yòng)Stack來(lái)組織需要重疊的widget。widget可以完全或部分重疊底部widget。
Stack summary:
用(yòng)于與另一個widget重疊的widget
子列表中的第一個widget是base widget; 随後的子widget被覆蓋在基礎widget的頂部
Stack的内容不能(néng)滾動
您可以選擇剪切超過渲染框的子項
Stack 示例:
a circular avatar containing the label 'Mia B' in the lower right portion of the circle
使用(yòng)Stack疊加Container（在半透明(míng)的黑色背景上(shàng)顯示其文(wén)本），放(fàng)置在Circle Avatar的頂部。Stack使用(yòng)alignment屬性和(hé)調整文(wén)本偏移。Dart code: main.dart, snippet belowImage: imagesPubspec: pubspec.yaml
an image with a grey gradient across the top; on top of the gradient is tools painted in white
使用(yòng)Stack将gradient疊加到(dào)圖像的頂部。gradient确保工(gōng)具欄的圖标與圖片不同。Dart code: contacts_demo.dart
class _MyHomePageState extends State
@override
Widget build(BuildContext context) {
var stack = new Stack(
alignment: const Alignment(0.6, 0.6),
children: [
new CircleAvatar(
backgroundImage: new AssetImage('images/pic.jpg'),
radius: 100.0,
),
new Container(
decoration: new BoxDecoration(
color: Colors.black45,
),
child: new Text(
'Mia B',
style: new TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
],
);
// ...
}
}
Card
Material Components 庫中的Card包含相關内容塊，可以由大(dà)多數類型的widget構成，但(dàn)通常與ListTile一起使用(yòng)。Card有一個子項， 但(dàn)它可以是支持多個子項的列，行，列表，網格或其他(tā)小(xiǎo)部件。默認情況下(xià)，Card将其大(dà)小(xiǎo)縮小(xiǎo)爲0像素。您可以使用(yòng)SizedBox來(lái)限制Card的大(dà)小(xiǎo)。
在Flutter中，Card具有圓角和(hé)陰影，這(zhè)使它有一個3D效果。更改Card的elevation屬性允許您控制投影效果。 例如，将elevation設置爲24.0，将會(huì)使Card從(cóng)視(shì)覺上(shàng)擡離表面并使陰影變得更加分散。 有關支持的elevation值的列表，請(qǐng)參見Material guidelines中的Elevation and Shadows。 如果指定不支持的值将會(huì)完全禁用(yòng)投影 。
Card 摘要:
實現(xiàn)了(le)一個 Material Design card
接受單個子項，但(dàn)該子項可以是Row，Column或其他(tā)包含子級列表的widget
顯示圓角和(hé)陰影
Card内容不能(néng)滾動
Material Components 庫的一個widget
Card 示例:
a Card containing 3 ListTiles 包含3個ListTiles并通過用(yòng)SizedBox包裝進行大(dà)小(xiǎo)調整的Card。分隔線分隔第一個和(hé)第二個ListTiles。Dart code: main.dart, snippet belowIcons: Icons classPubspec: pubspec.yaml
a Card containing an image and text and buttons under the image
包含圖像和(hé)文(wén)字的CardDart code: cards_demo.dart from the Flutter Gallery
class _MyHomePageState extends State
@override
Widget build(BuildContext context) {
var card = new SizedBox(
height: 210.0,
child: new Card(
child: new Column(
children: [
new ListTile(
title: new Text('1625 Main Street',
style: new TextStyle(fontWeight: FontWeight.w500)),
subtitle: new Text('My City, CA 99984'),
leading: new Icon(
Icons.restaurant_menu,
color: Colors.blue[500],
),
),
new Divider(),
new ListTile(
title: new Text('(408) 555-1212',
style: new TextStyle(fontWeight: FontWeight.w500)),
leading: new Icon(
Icons.contact_phone,
color: Colors.blue[500],
),
),
new ListTile(
title: new Text('costa@example.com'),
leading: new Icon(
Icons.contact_mail,
color: Colors.blue[500],
),
),
],
),
),
);
//...
}
ListTile
ListTile是Material Components庫中的一個專門(mén)的行級widget，用(yòng)于創建包含最多3行文(wén)本和(hé)可選的行前和(hé)行尾圖标的行。ListTile在Card或ListView中最常用(yòng)，但(dàn)也(yě)可以在别處使用(yòng)。
ListTile 摘要:
包含最多3行文(wén)本和(hé)可選圖标的專用(yòng)行
比起Row不易配置，但(dàn)更易于使用(yòng)
Material Components 庫裏的widget
ListTile 示例:
a Card containing 3 ListTiles
包含3個ListTiles的CardDart code: See Card examples.
3 ListTiles, each containing a pull-down button
使用(yòng)ListTile列出3個下(xià)拉按鈕類型。Dart code: buttons_demo.dart from the Flutter Gallery
網站(zhàn)建設開(kāi)發|APP設計(jì)開(kāi)發|小(xiǎo)程序建設開(kāi)發