(两百四十一)学习Flutter开发文档 - Flutter 中的布局(二)

接着学习https://flutter.cn/docs/development/ui/layout#common-layout-widgets

目录

通用布局 widgets

标准 widgets

Material widgets

Container

GridView

ListView

Stack

Card

ListTile


通用布局 widgets

Flutter 有一个丰富的布局 widget 仓库,里面有很多经常会用到的布局 widget。目的是为了让你更快的上手,而不是被一个完整的列表吓跑。关于其他有用的 widget 的信息,可以参考 Widget 目录,或者使用 API 参考文档 中的搜索框。而且,API 文档中的 widget 页面中经常会给出一些关于相似的 widget 哪个会更适合你的建议。

下面的 widget 会分为两类:widgets 库 中的标准 widgets 和 Material 库 中的 widgets。任何 app 都可以使用 widget 库,但是 Material 库中的组件只能在 Material app 中使用。

标准 widgets

  • Container:向 widget 增加 padding、margins、borders、background color 或者其他的装饰。

  • GridView:将 widget 展示为一个可滚动的网格。

  • ListView:将 widget 展示为一个可滚动的列表。

  • Stack:将 widget 覆盖在另一个的上面。

Material widgets

  • Card:将相关信息整理到一个有圆角和阴影的盒子中。

  • ListTile:将最多三行的文本、可选的导语以及后面的图标组织在一行中。

Container

许多布局都可以随意的用 Container,它可以将使用了 padding 或者增加了 borders/margins 的 widget 分开。你可以通过将整个布局放到一个 Container 中,并且改变它的背景色或者图片,来改变设备的背景。

摘要 (Container)

  • 增加 padding、margins、borders

  • 改变背景色或者图片

  • 只包含一个子 widget,但是这个子 widget 可以是行、列或者是 widget 树的根 widget

Diagram showing: margin, border, padding, and content

示例 (Container)

这个布局包含一个有两行的列,每行有两张图片。Container 用来将列的背景色变为浅灰色。

content_copy

Widget _buildImageColumn() => Container(
      decoration: BoxDecoration(
        color: Colors.black26,
      ),
      child: Column(
        children: [
          _buildImageRow(1),
          _buildImageRow(3),
        ],
      ),
    );

Screenshot showing 2 rows, each containing 2 images

Container 还用来为每个图片添加圆角和外边距:

content_copy

Widget _buildDecoratedImage(int imageIndex) => Expanded(
      child: Container(
        decoration: BoxDecoration(
          border: Border.all(width: 10, color: Colors.black38),
          borderRadius: const BorderRadius.all(const Radius.circular(8)),
        ),
        margin: const EdgeInsets.all(4),
        child: Image.asset('images/pic$imageIndex.jpg'),
      ),
    );

Widget _buildImageRow(int imageIndex) => Row(
      children: [
        _buildDecoratedImage(imageIndex),
        _buildDecoratedImage(imageIndex + 1),
      ],
    );

你可以在 布局构建教程 和 Flutter Gallery 中可以发现更多关于 Container 的例子。

App 源码: container

根据源码魔改了一下

BoxDecoration可以指定背景颜色,边界颜色粗细弧度

 

GridView

使用 GridView 将 widget 作为二维列表展示。GridView 提供两个预制的列表,或者你可以自定义网格。当 GridView 检测到内容太长而无法适应渲染盒时,它就会自动支持滚动。

摘要 (GridView)

  • 在网格中使用 widget

  • 当列的内容超出渲染容器的时候,它会自动支持滚动。

  • 创建自定义的网格,或者使用下面提供的网格的其中一个:

    • GridView.count 允许你制定列的数量

    • GridView.extent 允许你制定单元格的最大宽度

备忘 When displaying a two-dimensional list where it’s important which row and column a cell occupies (for example, it’s the entry in the “calorie” column for the “avocado” row), use Table or DataTable.

当展示二维列表中的单元格所在的行和列的位置很重要的(例如,它是 “calorie” 行和 “avocado” 列的条目)的时候,使用 Table 或者 DataTable

示例 (GridView)

A 3-column grid of photos

使用 GridView.extent 创建一个最大宽度为 150 像素的网格。

App 源码: grid_and_list

A 2 column grid with footers

使用 GridView.count 创建一个网格,它在竖屏模式下有两行,在横屏模式下有三行。可以通过为每个 GridTile 设置 footer 属性来创建标题。

Dart 代码: Flutter Gallery 中的 grid_list_demo.dart

Widget _buildGrid() => GridView.extent(
    maxCrossAxisExtent: 150,
    padding: const EdgeInsets.all(4),
    mainAxisSpacing: 4,
    crossAxisSpacing: 4,
    children: _buildGridTileList(30));

// The images are saved with names pic0.jpg, pic1.jpg...pic29.jpg.
// The List.generate() constructor allows an easy way to create
// a list when objects have a predictable naming pattern.
List<Container> _buildGridTileList(int count) => List.generate(
    count, (i) => Container(child: Image.asset('images/pic$i.jpg')));

padding离边界的距离

mainAxisSpacing 水平网格之间的距离

crossAxisSpacing 竖直网格之间的距离

 

ListView

ListView,一个和列很相似的 widget,当内容长于自己的渲染盒时,就会自动支持滚动。

摘要 (ListView)

  • 一个用来组织盒子中列表的专用 Column

  • 可以水平或者垂直布局

  • 当监测到空间不足时,会提供滚动

  • Column 的配置少,使用更容易,并且支持滚动

示例 (ListView)

ListView containing movie theaters and restaurants

使用 ListView 的业务列表,它使用了多个 ListTileDivider 将餐厅从剧院中分隔开。

App 源码: grid_and_list

ListView containing shades of blue

使用 ListView 展示特定颜色系列 Material Design 调色板 中的 颜色

Dart 代码: Flutter Gallery 中的 colors_demo.dart

Widget _buildList() => ListView(
      children: [
        _tile('CineArts at the Empire', '85 W Portal Ave', Icons.theaters),
        _tile('The Castro Theater', '429 Castro St', Icons.theaters),
        _tile('Alamo Drafthouse Cinema', '2550 Mission St', Icons.theaters),
        _tile('Roxie Theater', '3117 16th St', Icons.theaters),
        _tile('United Artists Stonestown Twin', '501 Buckingham Way',
            Icons.theaters),
        _tile('AMC Metreon 16', '135 4th St #3000', Icons.theaters),
        Divider(),
        _tile('Kescaped_code#39;s Kitchen', '757 Monterey Blvd', Icons.restaurant),
        _tile('Emmyescaped_code#39;s Restaurant', '1923 Ocean Ave', Icons.restaurant),
        _tile(
            'Chaiya Thai Restaurant', '272 Claremont Blvd', Icons.restaurant),
        _tile('La Ciccia', '291 30th St', Icons.restaurant),
      ],
    );

ListTile _tile(String title, String subtitle, IconData icon) => ListTile(
      title: Text(title,
          style: TextStyle(
            fontWeight: FontWeight.w500,
            fontSize: 20,
          )),
      subtitle: Text(subtitle),
      leading: Icon(
        icon,
        color: Colors.blue[500],
      ),
    );

 

Stack

可以使用 Stack 在基础 widget(通常是图片)上排列 widget。widget 可以完全或者部分覆盖基础 widget。

摘要 (Stack)

  • 用于覆盖另一个 widget

  • 子列表中的第一个 widget 是基础 widget;后面的子项覆盖在基础 widget 的顶部

  • Stack 的内容是无法滚动的

  • 你可以剪切掉超出渲染框的子项

示例 (Stack)

Circular avatar image with a label

CircleAvatar 的上面使用 Stack 覆盖 Container(在透明的黑色背景上展示它的 Text)。Stack 使用 alignment 属性和 Alignment 让文本偏移。

App 源码: card_and_stack

An image with a grey gradient across the top

使用 Stack 将渐变叠加到图片的顶部。渐变可以将工具栏的图标和图片区分开来。

Dart 代码: Flutter Gallery 中的 contacts_demo.dart

Widget _buildStack() => Stack(
    alignment: const Alignment(0.6, 0.6),
    children: [
      CircleAvatar(
        backgroundImage: AssetImage('images/pic.jpg'),
        radius: 100,
      ),
      Container(
        decoration: BoxDecoration(
          color: Colors.black45,
        ),
        child: Text(
          'Mia B',
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
      ),
    ],
  );

自己跑了一下

 

Card

Material 库 中的 Card 包含相关有价值的信息,几乎可以由任何 widget 组成,但是通常和 ListTile 一起使用。 Card 只有一个子项,这个子项可以是列、行、列表、网格或者其他支持多个子项的 widget。默认情况下,Card 的大小是 0x0 像素。你可以使用 SizedBox 控制 card 的大小。

在 Flutter 中,Card 有轻微的圆角和阴影来使它具有 3D 效果。改变 Cardelevation 属性可以控制阴影效果。例如,把 elevation 设置为 24,可以从视觉上更多的把 Card 抬离表面,使阴影变得更加分散。关于支持的 elevation 的值的列表,可以查看 Material guidelines 中的 Elevation。使用不支持的值则会使阴影无效。

摘要 (Card)

  • 实现一个 Material card

  • 用于呈现相关有价值的信息

  • 接收单个子项,但是子项可以是 RowColumn 或者其他可以包含列表子项的 widget

  • 显示圆角和阴影

  • Card 的内容无法滚动

  • 来自 Material 库

示例 (Card)

Card containing 3 ListTiles

包含 3 个 ListTile 的 Card,并且通过被 SizedBox 包住来调整大小。Divider 分隔了第一个和第二个 ListTiles

App 源码: card_and_stack

Card containing an image, text and buttons

包含图片和文本的 Card

Dart 代码: Flutter Gallery 中的 cards_demo.dart

Widget _buildCard() => SizedBox(
    height: 210,
    child: Card(
      child: Column(
        children: [
          ListTile(
            title: Text('1625 Main Street',
                style: TextStyle(fontWeight: FontWeight.w500)),
            subtitle: Text('My City, CA 99984'),
            leading: Icon(
              Icons.restaurant_menu,
              color: Colors.blue[500],
            ),
          ),
          Divider(),
          ListTile(
            title: Text('(408) 555-1212',
                style: TextStyle(fontWeight: FontWeight.w500)),
            leading: Icon(
              Icons.contact_phone,
              color: Colors.blue[500],
            ),
          ),
          ListTile(
            title: Text('costa@example.com'),
            leading: Icon(
              Icons.contact_mail,
              color: Colors.blue[500],
            ),
          ),
        ],
      ),
    ),
  );

ListTile

ListTileMaterial 库 中专用的行 widget,它可以很轻松的创建一个包含三行文本以及可选的行前和行尾图标的行。ListTileCard 或者 ListView 中最常用,但是也可以在别处使用。

摘要 (ListTile)

  • 一个可以包含最多 3 行文本和可选的图标的专用的行

  • Row 更少的配置,更容易使用

  • 来自 Material 库

示例 (ListTile)

Card containing 3 ListTiles

包含 3 个 ListTilesCard

App 源码: card_and_stack

3 ListTiles, each containing a pull-down button

使用 ListTile 列出 3 个下拉按钮类型。

Dart 代码: Flutter Gallery 中的 buttons_demo.dart

 

看起来比较简单=-=图标和主副标题,有点像preference

相关推荐
©️2020 CSDN 皮肤主题: 鲸 设计师:meimeiellie 返回首页