Flutter LinearLayout 权重替代

Question

我是 Android 开发人员，正在学习 Flutter。我希望我的屏幕看起来像这样：

|---------------------------------|
|                                 |
|  Babe               I miss you  |
|                                 |
|---------------------------------|

"Babe" 和 "I miss you" 应该是两个独立的元素。

使用 Android xml 我会用 LinearLayout 和两个 TextView 解决这个问题，每个 weight=1。 Flutter 的替代品是什么？

P.S。我知道您可以使用 FrameLayout 或 RelativeLayout 来解决它，但我想要最接近 LinearLayout 的行为。

Answer 1

Flutter 的 Row 小部件相当于 android 的 LinearLayout 和 android:orientation="horizontal"， Column 小部件相当于 android 的 LinearLayout 和 android:orientation="vertical"。

flex property of Flexible 小部件等同于 weight 属性，您可以将 Text 小部件包装在 Flexible 小部件中并指定 flex 属性.

示例：

new Row(
    children: <Widget>[
      new Flexible(child: new Text("Babe"), flex: 1,),
      new Flexible(child: new Text("I miss you"), flex: 1,)
    ],
  )

希望对您有所帮助！

Answer 2

您可以使用 row with MainAxisAlignment，这样您就可以按照您的期望放置元素

Widget textSection = new Container(
  child: new Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
     new Text('Babe'),
     new Text('I miss you')
  )
)

Answer 3

       new Container(
          child: new Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,

          children: <Widget> [
          new Text('Babe', style: AppStyle.AppBarTextStyle,),
          new Text('I miss you',style: AppStyle.AppBarTextStyle,)
          ]
          )
       )

Answer 4

考虑到问题中的布局，您希望在屏幕末尾显示两个文本，一个在开头，另一个在结尾，您只需将 MainAxisAlignment.spaceBetween 属性添加到行

因此您需要将代码修改为

child: new Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
     new Text('Babe'),
     new Text('I miss you')
     ]
  )

我不明白为什么第一个答案被接受，因为它只是将文本添加到屏幕的最右端，

提示：如果您需要在每个文本周围添加一些填充，请将每个文本包装在容器中并添加所需的填充和边距

Answer 5

我们可以使用 FractionallySizedBox 小部件来给出宽度和高度的权重和。

 FractionallySizedBox(
  heightFactor: .5,
  widthFactor: 1.0,
  alignment: Alignment.topCenter,
  child: child,
)

更多信息：

Link

Answer 6

使用 Expanded 小部件也可以产生像这样的 LinearLayout 效果：

Row(
  children: <Widget>[
    Expanded(
      child: Container(child: Text("Babe")),
      flex: 2,
    ),
    Expanded(
      child: Container(child: Text("I don't miss you"),alignment: Alignment.centerRight),
      flex: 2,
    ),
   ],
  ),

Answer 7

截图：

使用 Spacer 附带 flex 属性（默认为 1）

Row(
  children: <Widget>[
    Text('Hello'),
    Spacer(), // <-- Use this
    Text('World'),
  ],
)

Flutter LinearLayout 权重替代

Flutter LinearLayout weight alternative

layout

flutter