Flutter LinearLayout вес альтернатива

Я изучаю Android-разработчик. Я хочу, чтобы мой экран выглядел так:

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

"Младенец" и "Я скучаю по тебе" должны быть двумя отдельными элементами.

С Android xml я бы решил это с помощью LinearLayout и двух TextView с weight=1 для каждого. Какая альтернатива для флаттера?

PS Я знаю, что вы можете решить его с помощью FrameLayout или с RelativeLayout но я хочу, чтобы вы были ближе к поведению LinearLayout.

Ответ 1

Виджет Flutter Row эквивалентен андроиду LinearLayout с android:orientation="horizontal", а виджет Column эквивалентен андроиду 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,)
    ],
  )

Надеюсь, это поможет!

Ответ 2

Учитывая расположение в вопросе, вы хотите отобразить оба текста в конце экрана, один в начале, другой в конце, вы можете просто добавить свойство MainAxisAlignment.spaceBetween в строку

поэтому вам нужно изменить код на

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

Я не понимаю, почему был принят первый ответ, потому что он просто добавляет оба текста в самый правый конец экрана,

Подсказка: если вам нужно добавить отступы вокруг каждого текста, оберните каждый текст в контейнере и добавьте нужные отступы и поля

Ответ 3

Вы можете использовать row с MainAxisAlignment которая позволит вам разместить элементы в соответствии с вашими ожиданиями

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

Ответ 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,)
          ]
          )
       )

Ответ 5

Мы можем использовать виджет FractionallySizedBox, чтобы определить сумму веса для ширины и высоты.

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

Для получения дополнительной информации:

Ссылка

Ответ 6

Использование расширенного виджета может также создать эффект 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,
    ),
   ],
  ),