Flutter擁有豐富的布局widget，但(dàn)這(zhè)裏有一(yī)些最常用的布局widget。其目的是盡可(kě)能(néng)快(kuài)地(dì)讓您構建應用并運行(xíng)，而不是讓您淹沒在整個完整的widget列表中。
以下(xià)widget分為(wèi)兩類：widgets library中的标準widget和(hé)Material Components library中的專用widget 。 任何應用程序都(dōu)可(kě)以使用widgets library中的widget，但(dàn)隻有Material應用程序可(kě)以使用Material Components庫。
标準 widgets
Container添加 padding, margins, borders, background color, 或将其他(tā)裝飾添加到widget.
GridView将 widgets 排列為(wèi)可(kě)滾動的網格.
ListView将widget排列為(wèi)可(kě)滾動列表
Stack将widget重疊在另一(yī)個widget之上(shàng).
Material Components
Card将相關內(nèi)容放到帶圓角和(hé)投影的盒子中。
ListTile将最多3行(xíng)文字，以及可(kě)選的行(xíng)前和(hé)和(hé)行(xíng)尾的圖标排成一(yī)行(xíng)
Container
許多布局會自(zì)由使用容器來使用padding分隔widget，或者添加邊框（border）或邊距（margin）。您可(kě)以通(tōng)過将整個布局放入容器并更改其背景顔色或圖片來更改設備的背景。
Container 概要(yào) :
添加padding, margins, borders
改變背景顔色或圖片
包含單個子widget，但(dàn)該子widget可(kě)以是Row，Column，甚至是widget樹(shù)的根
a diagram showing that margins, borders, and padding, that surround content in a container
Container 示例:
除了(le)下(xià)面的例子之外(wài)，本教程中的許多示例都(dōu)使用了(le)Container。 您還可(kě)以在Flutter Gallery中找到更多容器示例。
該布局中每個圖像使用一(yī)個Container來添加一(yī)個圓形的灰色邊框和(hé)邊距。然後使用容器将列背景顔色更改為(wèi)淺灰色。
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
使用GridView将widget放置為(wèi)二維列表。 GridView提供了(le)兩個預制list，或者您可(kě)以構建自(zì)定義網格。當GridView檢測到其內(nèi)容太長(cháng)而不适合渲染框時(shí)，它會自(zì)動滾動。
GridView 概覽:
在網格中放置widget
檢測列內(nèi)容超過渲染框時(shí)自(zì)動提供滾動
構建您自(zì)己的自(zì)定義grid，或使用一(yī)下(xià)提供的grid之一(yī):GridView.count 允許您指定列數(shù)GridView.extent 允許您指定項的最大像素寬度
注意: 在顯示二維列表時(shí)，重要(yào)的是單元格占用哪一(yī)行(xíng)和(hé)哪一(yī)列時(shí)， 應該使用Table或 DataTable。
GridView 示例:
a 3-column grid of photos
使用GridView.extent 創建最大寬度為(wèi)150像素的網格Dart code: main.dart, snippet belowImages: imagesPubspec: pubspec.yaml
a 2 column grid with footers containing titles on a partially translucent background
使用GridView.count 在縱向模式下(xià)創建兩個行(xíng)的grid，并在橫向模式下(xià)創建3個行(xíng)的網格。通(tōng)過為(wèi)每個GridTile設置footer屬性來創建标題。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是一(yī)個類似列的widget，它的內(nèi)容對于其渲染框太長(cháng)時(shí)會自(zì)動提供滾動。
ListView 摘要(yào):
用于組織盒子中列表的特殊Column
可(kě)以水平或垂直放置
檢測它的內(nèi)容超過顯示框時(shí)提供滾動
比Column配置少(shǎo)，但(dàn)更易于使用并支持滾動
ListView 示例:
a ListView containing movie theaters and restaurants
使用ListView顯示多個ListTile的業務列表。分隔線将劇院與餐廳分開(kāi)
Dart code: main.dart, snippet belowIcons: Icons classPubspec: pubspec.yaml
a ListView containing shades of blue from the Material Design color palette
使用ListView控件來顯示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
使用Stack來組織需要(yào)重疊的widget。widget可(kě)以完全或部分重疊底部widget。
Stack summary:
用于與另一(yī)個widget重疊的widget
子列表中的第一(yī)個widget是base widget; 随後的子widget被覆蓋在基礎widget的頂部
Stack的內(nèi)容不能(néng)滾動
您可(kě)以選擇剪切超過渲染框的子項
Stack 示例:
a circular avatar containing the label 'Mia B' in the lower right portion of the circle
使用Stack疊加Container（在半透明(míng)的黑(hēi)色背景上(shàng)顯示其文本），放置在Circle Avatar的頂部。Stack使用alignment屬性和(hé)調整文本偏移。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
使用Stack将gradient疊加到圖像的頂部。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包含相關內(nèi)容塊，可(kě)以由大多數(shù)類型的widget構成，但(dàn)通(tōng)常與ListTile一(yī)起使用。Card有一(yī)個子項， 但(dàn)它可(kě)以是支持多個子項的列，行(xíng)，列表，網格或其他(tā)小部件。默認情況下(xià)，Card将其大小縮小為(wèi)0像素。您可(kě)以使用SizedBox來限制Card的大小。
在Flutter中，Card具有圓角和(hé)陰影，這(zhè)使它有一(yī)個3D效果。更改Card的elevation屬性允許您控制投影效果。 例如(rú)，将elevation設置為(wèi)24.0，将會使Card從(cóng)視(shì)覺上(shàng)擡離表面并使陰影變得更加分散。 有關支持的elevation值的列表，請(qǐng)參見(jiàn)Material guidelines中的Elevation and Shadows。 如(rú)果指定不支持的值将會完全禁用投影 。
Card 摘要(yào):
實現了(le)一(yī)個 Material Design card
接受單個子項，但(dàn)該子項可(kě)以是Row，Column或其他(tā)包含子級列表的widget
顯示圓角和(hé)陰影
Card內(nèi)容不能(néng)滾動
Material Components 庫的一(yī)個widget
Card 示例:
a Card containing 3 ListTiles 包含3個ListTiles并通(tōng)過用SizedBox包裝進行(xíng)大小調整的Card。分隔線分隔第一(yī)個和(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é)文字的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庫中的一(yī)個專門的行(xíng)級widget，用于創建包含最多3行(xíng)文本和(hé)可(kě)選的行(xíng)前和(hé)行(xíng)尾圖标的行(xíng)。ListTile在Card或ListView中最常用，但(dàn)也可(kě)以在别處使用。
ListTile 摘要(yào):
包含最多3行(xíng)文本和(hé)可(kě)選圖标的專用行(xíng)
比起Row不易配置，但(dàn)更易于使用
Material Components 庫裏的widget
ListTile 示例:
a Card containing 3 ListTiles
包含3個ListTiles的CardDart code: See Card examples.
3 ListTiles, each containing a pull-down button
使用ListTile列出3個下(xià)拉按鈕類型。Dart code: buttons_demo.dart from the Flutter Gallery
網站建設開(kāi)發|APP設計開(kāi)發|小程序建設開(kāi)發