如何根据其他小部件调整行中小部件的大小？

Question

我想创建一个在应用程序中常见的布局，显示有关公共交通的详细信息。 在左边，会有一条带点的线，在右边是关于车站的详细信息。

我想在 Flutter 中使用 CustomPainter 绘制带点的线，并通过使用 Row 并将数据包装在 Expanded() 中来显示除此之外的数据。

问题是我希望 CustomPainter 与包含动态数据的 Widget 具有相同的高度。 如果我将 CustomPainter 的高度设置为double.infinite ，则会出现错误。

如何确定数据 Widget 的大小以设置 CustomPainter 的宽度？

Answer 1

您可以使用IntrinsicHeight或IntrinsicWidth ，因此Row或Column内的小部件将与其中最高/最宽的小部件一样高/宽：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            title: Text('Intrinsic Height'),
          ),
          body: IntrinsicHeight(
            child: Row(
              children: <Widget>[
                Container(
                  width: 50,
                  color: Colors.red,
                ),
                Expanded(
                  child: Text(
                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, '
                      'totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt '
                      'explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur '
                      'magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia '
                      'dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore '),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

结果：