Layout 颤振线性布局重量备选方案

我是学习颤振的Android开发者。我希望我的屏幕如下所示：

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

“宝贝”和“我想你”应该是两个独立的元素

对于Android xml，我将使用

LinearLayout

和两个

TextView

s解决这个问题，每个

weight=1

。颤振的替代方案是什么

另外，我知道你可以用

FrameLayout

或

RelativeLayout

来解决这个问题，但我希望最接近

LinearLayout

的行为。

flatter的小部件相当于android的

LinearLayout

和

android:orientation=“horizontal”

， 这个小部件相当于android的

LinearLayout

，具有

android:orientation=“vertical”

小部件的属性相当于

weight

属性，您可以将

文本

小部件包装在

灵活

小部件中，并指定

灵活

属性

例如：

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

新行(
儿童：[
新的弹性体（儿童：新文本（“宝贝”），弹性体：1，），
新的弹性体（儿童：新文本（“我想你”），弹性体：1，）
],
)

希望有帮助

您可以使用，它将允许您按照预期放置元素

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

新容器(
孩子：新的一排(
mainAxisAlignment:mainAxisAlignment.space，
儿童：[
新文本（'Babe'，样式：AppStyle.AppBarTextStyle，），
新文本（“我想你”，样式：AppStyle.AppBarTextStyle）
]
)
)

考虑到问题中的布局，如果要在屏幕末尾显示两个文本，一个在开头，另一个在结尾，只需将

MainAxisAlignment.spaceBetween

属性添加到行中即可

因此，您需要将代码修改为

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

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

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

我们可以使用小部件为宽度和高度提供权重总和

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

有关更多信息：

使用小部件也可以产生如下线性布局效果：

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

行(
儿童：[
扩大(
子：容器（子：文本（“宝贝”）），
弹性：2，
),
扩大(
child:Container（child:Text（“我想你”），alignment:alignment.centerRight），
弹性：2，
),
],
),

屏幕截图：

---

使用

flex

属性附带的

Spacer

（默认为

1

）

行(
儿童：[
Text（'Hello'），
Spacer（），//必须使用
MainAxisAlignment.spaceBetween
才能获得理想的用户界面。谢谢我不知道为什么接受这个答案，因为它没有产生理想的结果。请改用MainAxisAlignment.spaceBetween每个元素位于新行：（Flex是我一直在寻找的。谢谢，伙计。现在我可以在旁边显示两个列表视图。这与LinearLayout的权重完全相同。这应该是公认的答案。）
Row(
  children: <Widget>[
    Expanded(
      child: Container(child: Text("Babe")),
      flex: 2,
    ),
    Expanded(
      child: Container(child: Text("I miss you"),alignment: Alignment.centerRight),
      flex: 2,
    ),
   ],
  ),