Flutter线性布局重量备选方案

qco9c6ql  于 2022-12-27  发布在  Flutter
关注(0)|答案(7)|浏览(163)

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

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

“宝贝”和“我想你”应该是两个独立的元素。
在Android xml中,我会用LinearLayout和两个TextView来解决这个问题,每个weight=1
我知道你可以用FrameLayoutRelativeLayout来解决它,但我想要最接近LinearLayout的行为。

fkaflof6

fkaflof61#

flutter的Row小工具相当于android的LinearLayout加上android:orientation="horizontal"Column小工具相当于android的LinearLayout加上android:orientation="vertical"
Flexible小工具的flex属性等同于weight属性,您可以将Text小工具 Package 在Flexible小工具中并指定flex属性。
示例:

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

tjvv9vkg2#

使用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,
    ),
   ],
  ),
a0x5cqrl

a0x5cqrl3#

考虑到问题中的布局,您希望在屏幕末尾显示两个文本,一个在开头,另一个在末尾,您只需将MainAxisAlignment.spaceBetween属性添加到该行
因此您需要修改代码以

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

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

提示:如果您需要在每个文本周围填充一些内容,请将容器中的每个文本换行,并添加所需的填充内容和边距

pgky5nke

pgky5nke4#

您可以将rowMainAxisAlignment一起使用,这样您就可以根据自己的期望放置元素

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

gmxoilav5#

截图:

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

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

xmq68pz96#

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

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

vfwfrxfs7#

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

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

更多信息:
Link

相关问题