Как заставить виджет заполнять оставшееся место в столбце

В Android мы можем сделать следующее, чтобы ImageView заполнял как можно больше места в зависимости от размера TextView.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

Как этого добиться в Flutter? Предположим, мне нужно сделать Datetime (зеленый), чтобы заполнить как можно больше.

new Column(
    children: <Widget>[
        new Text('Title',
            style: new TextStyle(fontWeight: FontWeight.bold)
        ),
        new Text('Datetime',
            style: new TextStyle(color: Colors.grey)
        ),
    ],
)

введите описание изображения здесь


flutter dart flutter-layout
person Guster    schedule 23.04.2018    source источник
comment
Разве вы не хотите, чтобы заполняло изображение, а не текст? это совсем другая тема - делать шрифт больше   -  person Pluriscient    schedule 23.04.2018
comment
Я редактировал вопрос. Пожалуйста, игнорируйте изображение, в основном я просто хочу, чтобы Datetime (зеленый) заполнял как можно большую высоту в зависимости от размера заголовка. Шрифт не изменится.   -  person Guster    schedule 24.04.2018

Ответы (3)


arrow_upward
99
arrow_downward

Не уверен на 100%, но я думаю, вы имеете в виду это. Расширенный виджет расширяется до размера, который он может использовать. Хотя я думаю, что в строке или столбце он ведет себя немного по-другому.

new Column(
children: <Widget>[
    new Text('Title',
        style: new TextStyle(fontWeight: FontWeight.bold)
    ),
    new Expanded(
        child: new Text('Datetime',
             style: new TextStyle(color: Colors.grey)
        ),
    ),
],
)
person Kevin Walter    schedule 23.04.2018
comment
Развернутый займет оставшееся место в строке или столбце. - person Faizan Mubasher; 16.02.2021
comment
Расширенная область занимает, но в приложении для выпуска отображается ошибка RenderFlex, и все виджеты в развернутом виде не видны. - person Nachiket Gohil; 19.03.2021

arrow_upward
9
arrow_downward

Вы можете использовать:

  1. Expanded с Align для размещения дочернего элемента

    Column(
  children: [
    FlutterLogo(),
    Expanded( // add this
      child: Align(
        alignment: Alignment.bottomCenter,
        child: FlutterLogo(),
      ),
    ),
  ],
)

  2. Spacer 

    Column(
  children: [
    FlutterLogo(),
    Spacer(), // add this
    FlutterLogo(),
  ],
)

  3. mainAxisAlignment

    Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween, // add this
  children: [
    FlutterLogo(colors: Colors.orange),
    FlutterLogo(colors: Colors.blue),
  ],
)
person CopsOnRoad    schedule 01.05.2020
comment
Отлично, работала нормально - person DolDurma; 14.05.2021

arrow_upward
7
arrow_downward

Если вам нужно просто добавить пустое пространство, используйте Spacer()

new Column(
children: <Widget>[
    new Text('Title',
        style: new TextStyle(fontWeight: FontWeight.bold)
    ),
    new Text('Datetime',
        style: new TextStyle(color: Colors.grey)
    ),
    Spacer(),
],
person Vadim Osovsky    schedule 30.12.2019