[译] 如何在 Flutter 中设计 LinearLayout？
Android 开发者的 Flutter 框架：如何在 Flutter 中设计 LinearLayout？
Marvin Ronsdorf 在 Unsplash 上拍摄的照片。html
这个博客是面向 Android 开发人员的，旨在将他们现有的 Android 知识应用于使用 Flutter 构建移动应用程序。在这篇博客中，咱们将探索 Flutter 中 LinearLayout 的等效设计部件。前端
系列
-
如何在 Flutter 中设计 LinearLayout？ （就在这里）android
先决条件
这篇博客已假设您已经在 PC 中配置了 flutter，而且可以运行 Hello World 应用程序。若是您还没有安装 flutter，请点击这里。ios
Dart 基于面向对象的概念，所以做为 android java 开发人员，您将可以轻松地掌握 dart。git
让咱们开始吧
若是您是 Android 开发人员，那么我假设您在设计布局时大量使用了 LinearLayout。对于那些不熟悉 LinearLayout 的人，我会给出官方定义。github
LinearLayout 是一种布局，能够将其它视图水平排列在单个列中，也能够垂直排列在单个行中。后端
上面的效果展现和定义自己是同样的，您能够肯定 Flutter 中的等效小部件是什么。是的，你是对的，它们是行列。bash
注意：“行/列”小部件不会滚动。若是您有一系列小部件并但愿它们可以在没有足够空间的状况下滚动，请考虑使用 ListView。app
如今咱们将介绍 LinearLayout 的一些主要属性，它们能够转换为 Flutter 中的等效小部件属性。
1. 方向
在 LinearLayout 中，您可使用 android:orientation ="horizontal" 属性定义其子项的方向，该属性将水平/垂直做为与 Flutter 中的行/列小部件相似的值。
在 Android 中，LinearLayout 是 ViewGroup，能够向里面添加子 View。您能够在 </ LinearLayout> 标签内设置全部子 View。所以，为了在咱们的 Row/Column 小部件中设置子小部件，咱们须要使用 Row/Column.children 属性，该属性接受 List。请参阅下面的代码片断。
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,
)
],
),
),
),
);
}
}
复制代码
在这个例子中，咱们使用了 LinearLayout 的 android:orientation ="horizontal" 属性的 Row 小部件。咱们使用 Column 做为垂直值。若是你想知道 Scaffold 在这里作什么，你能够阅读我以前的文章如何在 Flutter 中使用 Scaffold 设计 activity UI？
2. "match_parent" vs "wrap_content"
-
MATCH_PARENT: 这意味着视图但愿与其父视图同样大，若是您的视图是顶级根视图，那么它将与设备屏幕同样大。
-
WRAP_CONTENT: 这意味着该视图要足够大以包含其内容。
为了得到 match_parent 和 wrap_content 的行为，咱们须要在 Row/Column 小部件中使用 mainAxisSize 属性，mainAxisSize 属性采用 MainAxisSize 枚举，其中有两个值，即 MainAxisSize.min 和 MainAxisSize.max，的行为对应 wrap_content 和 match_parent。
在上面的例子中，咱们没有为 Row 部件定义任何 mainAxisSize 属性，因此默认状况下它的 mainAxisSize 属性设置为 MainAxisSize.max，它是 match_parent。容器的黄色背景表明了自由空间的覆盖方式。这就是咱们在上面的例子中定义这个属性的方法，并检查具备不一样属性值的输出。
....
body: new Container(
color: Colors.yellowAccent,
child: new Row(
mainAxisSize: MainAxisSize.min,
children: [...],
),
)
...
复制代码
这就是咱们如何在视觉上区分 Row/Column 小部件中使用的属性。
3. 权重
权重指定了在它自身的范围内子 view 如何摆放位置，咱们使用具备多个对齐值的 android:gravity ="center" 在 LinearLayout 布局中定义默认权重。在使用 MainAxisAlignment 和 CrossAxisAlignment 属性的 Row/Column 小部件中能够实现相同的功能。
1. 主轴对齐:
这个属性定义了子 view 应该如何沿着主轴（行/列）放置。为了使这个有效，若是将值设置为 MainAxisSize.min，则应在 Row/Column 小部件中提供一些空间，即因为没有可用空间，wrap_content 设置 MainAxisAlignment 对小部件没有任何影响。
....
body: new Container(
color: Colors.yellowAccent,
child: new Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: [...],
),
)
...
复制代码
一张图片赛过千言万语，我更喜欢视觉展现而不是描述每个属性。
所以在此输出的状况下将 LinearLayout 属性与 Row Widget 中的 MainAxisAlignment 属性进行比较。
如今，让咱们将它与列控件进行比较。
练习：您能够尝试其它枚举值，即
spaceEvenly,spaceAround，spaceBetween，其行为与咱们在 ConstraintLayout 中使用的垂直/水平链相同。
2. 交叉轴对齐 :
这个属性定义了子 view 应该如何沿横轴放置。这意味着若是咱们使用 Row 小部件，则子 view 的权重将基于垂直线。若是咱们使用 Column 小部件，那么子 view 将以水平线为基准。
这听起来很混乱吧！不要担忧，随着阅读的进一步深刻，你会理解得更透彻。
为了更好地理解，咱们使它成为 wrap_content，即 MainAxisSize.min。你能够像下面的代码同样定义一个 CrossAxisAlignment. start 属性。
....
body: new Container(
color: Colors.yellowAccent,
child: new Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [...],
),
)
...
复制代码
所以，在此下面输出将 LinearLayout 属性与 Row Widget 中的 CrossAxisAlignment 属性进行比较。
如今，让咱们将它与列控件进行比较。
拉伸行为有点不一样，它将小部件伸展到最大可用空间，即与其交叉轴 match_parent。
3. 布局权重
要建立一个线性布局，其中每一个子 view 使用相同的空间或在屏幕上以特定比例划分空间，咱们将每一个视图的 android:layout_height 设置为 "0dp"（对于垂直布局）或将每一个视图的 android:layout_width 设置为 "0dp"（对于水平布局）。而后将每一个视图的 android:layout_weight 设置为 "1" 或根据要划分的空间设置其它任何值。
为了在 flutter Row/Column 小部件中实现一样的功能，咱们将每一个子 view 包装到一个 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 中大量使用，与 Row/Column 小部件相同。但愿在即将到来的博客中涵盖更多主题。我已经建立了一个示例应用程序来演示 Row/Column 属性以及这些属性在组合时如何工做。
看看这里的 android 例子。
burhanrashid52 / FlutterForAndroidExample：经过在GitHub上建立一个账户，为 FlutterForAndroidExample 开发作出贡献。
谢谢 ！！！
若是您以为这篇文章有帮助。请收藏，分享和拍手，这样其余人会在中看到这一点。若是您有任何问题或建议，请在博客上自由发表评论，或在 Twitter，Github 或 Reddit 上给我点赞。
要获取我即将发布的博客的最新更新，请在 Medium，Twitter，Github 或Reddit 上关注我。
若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。
掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。
- 1. 在TeXstuidio中如何设置XeLaTeX编译
- 2. [译]如果在Flutter中添加图片
- 3. [Flutter翻译]咱们如何建设咱们的Flutter团队
- 4. 在设计中如何运用颜色
- 5. 在PS中如何设计个人logo
- 6. 在网页设计中如何排版
- 7. 如何在sqlite中使用flutter
- 8. 如何自定义LinearLayout
- 9. 如何在多个LinearLayout中添加分割线
- 10. 如何在多个LinearLayout中添加分隔线？
- 更多相关文章...
- • XSD 如何使用? - XML Schema 教程
- • Web 创建设计 - 网站建设指南
- • TiDB 在摩拜单车在线数据业务的应用和实践
- • IntelliJ IDEA代码格式化设置
-
每一个你不满意的现在，都有一个你没有努力的曾经。