如何将小部件填充到完整的可用行高

Question

布局如下所示：

这是一个Row，它在里面ListView。里面有一个Column带Text小部件、前导和尾随小部件。问题是前导小部件必须填充Row. 该Row高度由所确定的Column与所述Text窗口小部件，和前端小部件应调整到这个大小，而不是试图增加Row高度为无穷大（例如，领先的插件可以是着色的Container具有无限的高度和给定的宽度）。是否有可能做到这一点？

Answer 1

@Thierry的回答很好。但是，如果您的行具有动态高度（例如，您的字幕具有未定义的长度，并且行应该扩展取决于它的高度），那么您可以使用Stack小部件作为列表项的根小部件来处理此问题。这是工作代码：

  @override
  Widget build(BuildContext context) {
    final leadingWidgetWidth = 120.0;

    return Stack(children: [
      Positioned.fill(
        child: Container(
          alignment: Alignment.centerLeft,
          // This child will fill full height, replace it with your leading widget
          child: Container(
            color: Colors.blue,
            width: leadingWidgetWidth,
          ),
        ),
      ),
      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(width: leadingWidgetWidth),
          Expanded(
            // Here your column with texts
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text('Title'),
                Text('Some dynamic text'),
                Text('Some dynamic text'),
              ],
            ),
          ),
          Expanded(
            // Here your trailing widget
            child: Container(color: Colors.blueGrey),
          )
        ],
      )
    ]);
  }

Answer 2

使用crossAxisAlignment: CrossAxisAlignment.stretch填充height的Row（width的Column），即沿CrossAxis舒展。

使用Expandedwidgets 沿着MainAxis 填充空间 flex 属性将决定每个widget 的比例。

对于尾随小部件，只需使用Center小部件将其居中即可。

为了让你的Rowinside aListView伸展到最高孩子的高度，在Row里面放一个IntrinsicHeight小部件。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Row and Column',
      home: Scaffold(
        body: ListView(
          children: [
            IntrinsicHeight(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Expanded(child: MyWidget()),
                  Expanded(
                    flex: 3,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        MyTextWidget(
                          text:
                              'I like to believe that science is becoming mainstream.',
                        ),
                        MyTextWidget(
                          text:
                              'There is no known objects accounting for most of the effective gravity in the universe.',
                        ),
                        MyTextWidget(
                          text: "Let's explore because it's fun.",
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    child: Center(
                      child: SizedBox(height: 40.0, child: MyWidget()),
                    ),
                  ),
                ],
              ),
            ),
            Spacer(),
          ],
        ),
      ),
    ),
  );
}

class MyTextWidget extends StatelessWidget {
  final String text;

  const MyTextWidget({Key key, this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        padding: const EdgeInsets.all(4.0),
        color: Colors.blueGrey,
        child: Text(text),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(color: Colors.blueGrey),
    );
  }
}
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Row and Column',
      home: Scaffold(
        body: ListView(
          children: [
            IntrinsicHeight(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Expanded(child: MyWidget()),
                  Expanded(
                    flex: 3,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        MyTextWidget(
                          text:
                              'I like to believe that science is becoming mainstream.',
                        ),
                        MyTextWidget(
                          text:
                              'There is no known objects accounting for most of the effective gravity in the universe.',
                        ),
                        MyTextWidget(
                          text: "Let's explore because it's fun.",
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    child: Center(
                      child: SizedBox(height: 40.0, child: MyWidget()),
                    ),
                  ),
                ],
              ),
            ),
            Spacer(),
          ],
        ),
      ),
    ),
  );
}

class MyTextWidget extends StatelessWidget {
  final String text;

  const MyTextWidget({Key key, this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        padding: const EdgeInsets.all(4.0),
        color: Colors.blueGrey,
        child: Text(text),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(color: Colors.blueGrey),
    );
  }
}