给 Android 开发者的 Flutter 指南:布局

395 阅读2分钟

原文地址:给 Android 开发者的 Flutter 指南:布局

1. LinearLayout 的对应概念是什么?

在 Android 中,LinearLayout 用于线性布局 widget 的—水平或者垂直。在 Flutter 中,使用 Row 或者 Column Widget 来实现相同的效果。

如果你注意看的话,会发现下面的两段代码除了 Row 和 Column widget 以外是一模一样的。它们的孩子是一样的,而这个特性可以被充分利用来开发包含有相同的孩子但是会随时间改变的复杂布局。

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Row One'),
        Text('Row Two'),
        Text('Row Three'),
        Text('Row Four'),
      ],
    );
  }
@override
Widget build(BuildContext context) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text('Column One'),
      Text('Column Two'),
      Text('Column Three'),
      Text('Column Four'),
    ],
  );
}

如果想学习更多的构建线性布局的内容,请阅读社区贡献的 Medium 文章 给 Android 开发者的 Flutter 指南:如何在 Flutter 中设计线性布局?

2. RelativeLayout 的对应概念是什么?

RelativeLayout 通过 Widget 的相互位置对它们进行布局。在 Flutter 中,有几种实现相同效果的方法。

你可以通过组合使用 Column、Row 和 Stack Widget 实现 RelativeLayout 的效果。你还可以在 Widget 构造器内声明孩子相对父亲的布局规则。

Collin 在 StackOverflow 上的回答是一个在 Flutter 中构建相对布局的好例子。

3. ScrollView 的对应概念是什么?

在 Android 中,使用 ScrollView 布局 widget—如果用户的设备屏幕比应用的内容区域小,用户可以滑动内容。

在 Flutter 中,实现这个功能的最简单的方法是使用 ListView widget。从 Android 的角度看,这样做可能是杀鸡用牛刀了,但是 Flutter 中 ListView widget 既是一个 ScrollView,也是一个 Android 中的 ListView。

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Text('Row One'),
        Text('Row Two'),
        Text('Row Three'),
        Text('Row Four'),
      ],
    );
  }

4. 在 Flutter 中如何处理屏幕旋转?

FlutterView 会处理配置的变化,前提条件是在 AndroidManifest.xml 文件中声明了:

android:configChanges="orientation|screenSize"