【译】Flutter For Android Developers：如何在Flutter中设计LinearLayout。

最新推荐文章于 2024-03-28 09:30:57 发布

Luyifei666

最新推荐文章于 2024-03-28 09:30:57 发布

阅读量415

点赞数

分类专栏： Flutter

Flutter 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

demo下载

此博客适用于希望应用现有Android知识的Android开发人员使用Flutter构建移动应用程序。在这篇博客中，我们将探讨Flutter中LinearLayout的等效设计小部件。

系列

如何在Flutter中设计Activity UI。
如何在Flutter中设计LinearLayout。（你在这里）
如何在Flutter中设计FrameLayout。

先决条件

此博客已假设您已经在PC中设置了颤振，并且能够运行Hello World应用程序。如果您尚未安装颤振，请从此处开始。

Dart基于面向对象的概念，因此作为android java开发人员，您将能够轻松地捕获dart。

让我们开始吧

如果您是Android开发人员，那么我假设您在设计布局时大量使用LinearLayout。那些仍然不熟悉LinearLayout的人让我从官方定义开始。

LinearLayout是一种布局，可以在单个列中水平排列其他视图，也可以在单个行中垂直排列。

如上面的可视化表示和定义本身，您可以看出Flutter中的等效小部件是什么。是的，你是对的，他们是Row和Column。这两个小部件的行为几乎与原生Android中的LinearLayout相同。行和列也大量用于颤振。

注意： “行/列”小组件不会滚动。如果您有一系列小部件并希望它们能够在没有足够空间的情况下滚动，请考虑使用ListView。

现在我们将介绍LinearLayout的一些主要属性，它们可以转换为Flutter中的等效小部件属性。

1.Orientation

在LinearLayout中，您可以使用android:orientation=”horizontal” 属性horizontal/vertical 作为值来定义其子项的方向，这些值类似于Flutter中的行/列窗口小部件。

在Android中，LinearLayout ViewGroup 可以作为子视图。您可以在tags.So中设置所有子视图<LinearLayout> </LinearLayout>，在我们的Row / Column小部件中设置子小部件，我们需要使用Row / Column.children属性接受List<Widget>。请参阅下面的代码段。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("LinearLayout Example"),
        ),
        body: new Container(
          color: Colors.yellowAccent,
          child: new Row(
            children: [
              new Icon(
                Icons.access_time,
                size: 50.0,
              ),
              new Icon(
                Icons.pie_chart,
                size: 100.0,
              ),
              new Icon(
                Icons.email,
                size: 50.0,
              )
            ],
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们使用了android:orientation=”horizontal”属性的Row小部件LinearLayout。我们使用Column作为垂直值。如果你想知道Scaffold在这里做什么，你可以阅读我之前的文章如何在Flutter中使用Scaffold设计活动UI？。下面是上面代码中使用Row和Column小部件的输出。

2.“match_parent”vs“wrap_content”

MATCH_PARENT：这意味着视图想要与其父视图一样大，如果您的视图是顶级根视图，那么它将与设备屏幕一样大。
WRAP_CONTENT：这意味着视图要足够大以包含其内容。

为了获得行为match_parent并且wrap_content我们需要mainAxisSize在Row / Column小部件中使用属性，mainAxisSize属性将MainAxisSize枚举带有两个值，MainAxisSize.min这两个值的行为wrap_content与MainAxisSize.max行为相同match_parent。

在上面的示例中，我们没有为Row小部件定义任何mainAxisSize属性，因此默认情况下它的set mainAxisSize属性MainAxisSize.max 为match_parent。容器的黄色背景表示如何覆盖自由空间。这是我们在上面的示例中定义此属性的方法，并使用不同的属性值检查输出。

....
body: new Container(
  color: Colors.yellowAccent,
  child: new Row(
    mainAxisSize: MainAxisSize.min,
    children: [...],
  ),
)
...

这就是我们如何在视觉上区分我们在Row / Column小部件中使用的属性。

3.Gravity

重力指定子视图应如何在其自己的范围内定位其内容。我们使用android:gravity=”center”多个对齐值在LinearLayout布局中定义重力。在Row / Column小部件中使用MainAxisAlignment和CrossAxisAlignment属性可以实现相同的效果。

1. MainAxisAlignment：

此属性定义了孩子应沿主轴线（行/列）。为了放置，使这项工作，应该有行/列控件可用一些空间，如果设置的值MainAxisSize.min，即wrap_content比设定MainAxisAlignment赢得”由于没有可用空间，对小部件有任何影响。我们可以像这样定义MainAxisAlignment属性。

....
body: new Container(
  color: Colors.yellowAccent,
  child: new Row(
    mainAxisSize: MainAxisSize.max,
    mainAxisAlignment: MainAxisAlignment.start,
    children: [...],
  ),
)
...

一张图片胜过千言万语，而不是描述每一个属性我更喜欢视觉表现。

因此，在此输出下方将LinearLayout属性与Row Widget中的MainAxisAlignment属性进行比较。

现在，让我们将它与Column Widget进行比较。

练习：你可以尝试其他的枚举spaceEvenly，spaceAround，spaceBetween这表现为我们在ConstraintLayout使用垂直/水平链。

2. CrossAxisAlignment ：

此属性定义子项应如何沿横轴放置。这意味着如果我们使用Row小部件，则个体的子重力将基于垂直线。如果我们使用Column小部件，则个人的子重力将基于水平线。

这听起来很混乱吧！当你进一步阅读时，不要担心你会更好地理解。

为了更好地理解，我们正在创造一种wrap_content即MainAxisSize.min。您可以像下面的代码一样定义CrossAxisAlignment属性。如果未设置任何属性，则CrossAxisAlignment. start默认情况下将采用该属性。

....
body: new Container(
  color: Colors.yellowAccent,
  child: new Row(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [...],
  ),
)
...

因此，在此输出下方将LinearLayout属性与Row Widget中的CrossAxisAlignment属性进行比较。

现在，让我们将它与Column Widget进行比较。

拉伸行为略有不同，它将小部件拉伸到最大可用空间，即match_parent其横轴。

3. Layout Weight

要创建一个线性布局，其中每个孩子使用相同的空间量或在屏幕上按特定比例划分空间，我们将android:layout_height每个视图设置为“0dp”（对于垂直布局）或android:layout_width每个视图为“0dp”（对于水平布局））。然后根据要划分的空间将android:layout_weight每个视图设置为“1”或任何其他值。

为了在flutter Row / Column小部件中实现相同的功能，我们将每个子节点包装到一个Expanded小部件中，该小部件将具有与我们相同的flex属性，android:layout_weight因此通过定义flex值，我们定义应该应用于该特定子节点的空间量。

这是您为每个孩子定义重量/弹性的方法。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("LinearLayout Example"),
        ),
        body: new Container(
          color: Colors.yellowAccent,
          child: new Container(
            child: new Row(
              children: [
                new Expanded(
                  child: new Container(
                    child: new Icon(
                      Icons.access_time,
                      size: 50.0,
                    ),
                    color: Colors.red,
                  ),
                  flex: 2,
                ),
                new Expanded(
                  child: new Container(
                    child: new Icon(
                      Icons.pie_chart,
                      size: 100.0,
                    ),
                    color: Colors.blue,
                  ),
                  flex: 4,
                ),
                new Expanded(
                  child: new Container(
                    child: new Icon(
                      Icons.email,
                      size: 50.0,
                    ),
                    color: Colors.green,
                  ),
                  flex: 6,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

为了更好地理解，我们将每个图标包装在具有背景颜色的容器中，以便轻松识别窗口小部件已覆盖的空间。

结论

LinearLayout在Android中大量使用，与flutter Row / Column小部件相同。希望在即将到来的博客中涵盖更多主题。我创建了一个示例应用程序来使用行/列属性以及这些属性在组合时如何工作。

在这里查看flutter for android示例。

burhanrashid52 / FlutterForAndroidExample
通过在GitHub上创建一个帐户来为FlutterForAndroidExample开发做贡献。github.com

谢谢！！！

如果您觉得这篇文章有帮助。请喜欢，分享和鼓掌，这样其他人就会在Medium上看到这个。如果您有任何问题或建议，请在博客上发表评论或在Twitter，Github或Reddit上点击我。

要获得即将发布的博客的最新更新，请关注我的媒体，Twitter，Github或Reddit。

Luyifei666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【译】Flutter For Android Developers：如何在Flutter中设计LinearLayout。

demo下载此博客适用于希望应用现有Android知识的Android开发人员使用Flutter构建移动应用程序。在这篇博客中，我们将探讨Flutter中LinearLayout的等效设计小部件。系列如何在Flutter中设计Activity UI。如何在Flutter中设计LinearLayout。（你在这里）如何在Flutter中设计FrameLayout。先决条件...
复制链接

扫一扫