Flutter LinearLayout重量替代品

Question

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

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

"宝贝"和"我想念你"应该是两个独立的元素.

借助Android XML我会解决这个问题LinearLayout和两个TextViews的weight=1每一个.颤动的替代方案是什么？

PS我知道你可以用FrameLayout或解决它,RelativeLayout但我想最接近LinearLayout行为.

Answer 1

颤振的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

使用Expanded小部件也可以产生如下所示的 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,
    ),
   ],
  ),

Answer 3

截屏：

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

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

Answer 4

您可以使用rowwithMainAxisAlignment来根据您的期望放置元素

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

Answer 5

考虑问题的布局，您想将两个文本都显示在屏幕的末尾，而将文本显示在屏幕的末尾，您只需MainAxisAlignment.spaceBetween在行中添加属性

因此您需要将代码修改为

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

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

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