如何根據其他小部件調整行中小部件的大小？

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 '),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

結果：