- 所有布局widget都有一个
child
属性(例如Center
或Container
),或者一个children
属性,如果他们需要一个widget列表(例如Row,Column,ListView或Stack) - Container也是一个widget,允许您自定义其子widget。如果要添加
填充,边距,边框或背景色
,请使用Container
来设置(译者语:只有容器有这些属性
)。 - 一般来说, app没有使用Scaffold的话,会有一个黑色的背景和一个默认为黑色的文本颜色。
默认情况下,非Material应用程序不包含AppBar
,标题或背景颜色。 如果您想在非Material应用程序中使用这些功能,您必须自己构建它们 - Expanded widge 调整 widgets ,通过使用Expanded widget,可以将widget的大小设置为适和行或列
body: new Center(
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new Expanded(
child: new Image.asset('images/pic1.jpg'),
),
new Expanded(
flex: 2,
child: new Image.asset('images/pic2.jpg'),
),
new Expanded(
- ListTile是一个易于使用的小部件,具有前后图标属性以及最多3行文本。
-
MainAxisAlignment 和CrossAxisAlignment 类提供了很多控制对齐的常量.
MainAxisSize
spaceEvenly,它会在每个图像之间,之前和之后均匀分配空闲的水平空间。
start 这会将该列中的子项左对齐。
常用布局widgets
Flutter拥有丰富的布局widget,但这里有一些最常用的布局widget。其目的是尽可能快地让您构建应用并运行,而不是让您淹没在整个完整的widget列表中。 有关其他可用widget的信息,请参阅widget概述,或使用API 参考 docs文档中的搜索框。 此外,API文档中的widget页面经常会推荐一些可能更适合您需求的类似widget。
以下widget分为两类:widgets library中的标准widget和Material Components library中的专用widget 。 任何应用程序都可以使用widgets library中的widget,但只有Material应用程序可以使用Material Components库。
标准 widgets
-
Container
添加 padding, margins, borders, background color, 或将其他装饰添加到widget. -
GridView
将 widgets 排列为可滚动的网格.
使用GridView将widget放置为二维列表。 GridView提供了两个预制list,或者您可以构建自定义网格。当GridView检测到其内容太长而不适合渲染框时,它会自动滚动。GridView 概览:
在网格中放置widget
检测列内容超过渲染框时自动提供滚动
构建您自己的自定义grid,或使用一下提供的grid之一:
GridView.count
允许您指定列数
GridView.extent
允许您指定项的最大像素宽度 -
Stack
组织需要重叠的widget。widget可以完全或部分重叠底部widget。
Stack 概览:
(1) 用于与另一个widget重叠的widget
(2) 子列表中的第一个widget是base widget; 随后的子widget被覆盖在基础widget的顶部
(3) Stack的内容不能滚动
(4) 您可以选择剪切超过渲染框的子项
Material Components
Container
许多布局会自由使用容器来使用padding分隔widget,或者添加边框(border)或边距(margin)。您可以通过将整个布局放入容器并更改其背景颜色或图片来更改设备的背景。
Container 概要 :
- 添加padding, margins, borders
- 改变背景颜色或图片
- 包含单个子widget,但该子widget可以是Row,Column,甚至是widget树的根