Как столбец может соответствовать высоте родительской строки в Flutter?

#flutter #flutter-layout

Вопрос:

Учитывая следующий макет, я пытаюсь заставить FlatButton (правую боковую кнопку) соответствовать высоте строки. Использование Flexible Expandable виджетов или, похоже, не решает проблему. Обязательным требованием является возможность заполнения оставшегося пространства текстовым столбцом.

Это код, который преобразуется в изображение.

 class UITest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Row(
        children: [
          Padding(
            padding: const EdgeInsets.only(
                left: 12.0, bottom: 12.0, top: 12.0, right: 6.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [Text('12'), Text('MAY'), Text('12')],
            ),
          ),
          Text('–'),
          Padding(
            padding: const EdgeInsets.only(
                left: 6.0, bottom: 12.0, top: 12.0, right: 12.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [Text('12'), Text('MAY'), Text('12')],
            ),
          ),
          Expanded(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                    'Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet'),
                Text('Lorem')
              ],
            ),
          ),
          SizedBox(
            width: 10.0,
          ),
          ButtonTheme(
            buttonColor: Colors.red,
            minWidth: 0.0,
            padding: EdgeInsets.zero,
            child: FlatButton(
              onPressed: () {},
              child: Image(
                image: AssetImage('assets/icons/location.png'),
                width: 30.0,
                height: 30.0,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Есть идеи, как я могу этого добиться?

1. здесь вам нужно будет использовать FittedBox: youtube.com/watch?v=T4Uehk3_wlYamp;vl=en

2. оберните свой FlatButton с SizedBox(height: double.infinity, child: ...)

3. @Uni FittedBox не работает в этом примере по неизвестным причинам:(. Если я попытаюсь обернуть его вокруг ButtonTheme или FlatButton.

4. @pskink Добавление SizedBox позволяет расширить мой макет до высоты экрана, я хочу, чтобы кнопка была той же высоты, что и строка.

Ответ №1:

 class UITest extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    // use container or similar widget as child for body
    body: Container(
    child:Row(
      // and this gives the children full height
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Padding(
          padding: const EdgeInsets.only(
              left: 12.0, bottom: 12.0, top: 12.0, right: 6.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [Text('12'), Text('MAY'), Text('12')],
          ),
        ),
        Text('–'),
        Padding(
          padding: const EdgeInsets.only(
              left: 6.0, bottom: 12.0, top: 12.0, right: 12.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [Text('12'), Text('MAY'), Text('12')],
          ),
        ),
        Expanded(
          // same here, use container as child
          child: Container(
            child:Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                    'Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet'),
                Text('Lorem')
              ],
            )
          ),
        ),
        SizedBox(
          width: 10.0,
        ),
        ButtonTheme(
          buttonColor: Colors.red,
          minWidth: 0.0,
          padding: EdgeInsets.zero,
          child: FlatButton(
            onPressed: () {},
            child: Image(
              image: AssetImage('assets/icons/location.png'),
              width: 30.0,
              height: 30.0,
            ),
          ),
        ),
      ],
    )
  ),
);
 }
}

1. Это решение позволяет моей высоте макета соответствовать экрану, я хочу, чтобы ButtonTheme / FlatButton были той же высоты, что и родительская строка.

2. в этом случае измените высоту контейнера

Ответ №2:

Вы можете сделать что-то вроде этого,

Оберните его, IntrinsicHeight чтобы он соответствовал Row высоте ‘s, чтобы он не был переполнен.

 body: IntrinsicHeight(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            
            .....
            
            ButtonTheme(
              buttonColor: Colors.red,
              minWidth: 0.0,
              padding: EdgeInsets.zero,
              child: FlatButton(
                color: Colors.blue,
                onPressed: () {},
                child: Image(
                image: AssetImage('assets/icons/location.png'),
                width: 30.0,
                height: 30.0,
                ),
              ),
            ),
          ],
        ),
      )

См.: https://api.flutter.dev/flutter/widgets/IntrinsicHeight-class.html

Надеюсь, это решит вашу проблему!

1. Я не хочу жестко указывать высоту контейнера, она должна быть динамической.

2. Это решение отлично работает. Однако я попытаюсь добиться этого без встроенной высоты, поскольку это дорогой виджет, и этот макет будет встроен в listview.