布局

布局

如何使用 widget 来定义布局属性？

在 React Native 中，大多数布局需要通过向指定的组件传递属性参数进行设置。比如，你可以使用 View 的 style 来设置 flexbox 属性。如果要整理一列的组件，你可以使用如下的属性设置：flexDirection: “column”。

// React Native
<View
  style={{
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-between',
    alignItems: 'center'
  }}
>

在 Flutter 中，布局主要是由专门的 widget 定义的，它们同控制类 widget 和样式属性一起发挥功能。

比如，Column 和Row widget接受一个数组的子元素并且分别按照纵向和横向进行排列。

// Flutter
Center(
  child: Column(
    children: <Widget>[
      Container(
        color: Colors.red,
        width: 100.0,
        height: 100.0,
      ),
      Container(
        color: Colors.blue,
        width: 100.0,
        height: 100.0,
      ),
      Container(
        color: Colors.green,
        width: 100.0,
        height: 100.0,
      ),
    ],
  ),
)

Flutter 在核心 widget 库中提供多种不同的布局 widget。比如 Padding、Align 和 Stack。

要得到完整的 widget 列表，请参考 Layout Widgets。

Android

iOS

如何为 widget 分层？

在 React Native 中，组件可以通过 absolute 划分层次。

在 Flutter 中使用 Stack widget 将子 widget 进行分层。该 widget 可以将整体或者部分的子 widget 进行分层。

Stack widget 将子 widget 根据容器的边界进行布局。如果你仅仅想把子 widget 重叠摆放的话，这个 widget 非常合适。

// Flutter
Stack(
  alignment: const Alignment(0.6, 0.6),
  children: <Widget>[
    CircleAvatar(
      backgroundImage: NetworkImage(
        'https://avatars3.githubusercontent.com/u/14101776?v=4'),
    ),
    Container(
      decoration: BoxDecoration(
          color: Colors.black45,
      ),
      child: Text('Flutter'),
    ),
  ],
)

上面的示例代码使用 Stack 将一个 Container （将 Text 显示在一个半透明的黑色背景上）覆盖在一个 CircleAvatar 上。Stack 使用对齐属性和 Alignment 坐标微调文本。

Android

iOS

如果想了解更多相关信息，请参考 Stack 类文档。