Question

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

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

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

使用Android xml，我会使用LinearLayout和两个TextView来解决此问题，每个weight=1。什么是颤振的替代方案？

P.S。我知道您可以使用FrameLayout或RelativeLayout解决问题，但我希望最接近LinearLayout行为。

Answer 1

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

flex小部件的

Flexible属性是等效的weight属性，您可以将Text小部件包装在Flexible小部件中并指定{{1} } property。

示例：

flex

希望有所帮助！

Answer 2

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

因此您需要将代码修改为

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

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

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

Answer 3

使用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 4

您可以将row与MainAxisAlignment一起使用，这样您就可以根据自己的预期放置元素

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

Answer 5

       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 6

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

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

有关更多信息：

Link

Answer 7

截图：

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

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

Flutter LinearLayout重量替代品

7 个答案: