如何根据其他小部件在 Row 中调整小部件的大小？答案

【问题标题】：How to size a Widget in Row based on other widgets?如何根据其他小部件在 Row 中调整小部件的大小？
【发布时间】：2019-07-19 15:39:16
【问题描述】：

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

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

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

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

【问题讨论】：

标签： flutter flutter-layout

【解决方案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 '),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

结果：

【讨论】：