Flutter LinearLayout重量替代品

Question

我是Android开发人员学习扑腾。我希望我的屏幕看起来像这样：

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

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

使用Android xml，我会用LinearLayout和两个TextViews用weight=1解决这个问题。颤动的替代方案是什么？

附：我知道你可以用FrameLayout或RelativeLayout解决它，但我想最接近LinearLayout的行为。

Answer 1

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

flex小部件的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

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

所以你需要修改你的代码

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

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

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

Answer 3

你可以使用row和MainAxisAlignment，它可以根据你的期望放置元素

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

Answer 4

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

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