颤动:行横轴展开

Question

有没有办法给特定小部件提供行中最高小部件的高度？我不想在十字轴上拉伸行.我只是希望所有小部件都具有最高小部件的高度.

Answer 1

好的!只需将您的行包装成一个IntrinsicHeight

IntrinsicHeight(
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[],
  ),
);

Answer 2

有很多事情需要考虑。

行约束的父级

IntrinsicHeight仅当“高度不受限制”时才有效。相反，如果 的父级Row受到约束，则DartPad将不起作用。

• 如果您想要做的是扩展小部件的高度以匹配父级，只需执行以下操作：

Row(
 crossAxisAlignment: CrossAxisAlignment.stretch,
 ...
)

即使您将行的子级高度设置为不相等，它也会使所有小部件具有相同的高度。它会忽略孩子的身高，并且不会使其他小部件与最高的小部件相同。

行的父级不受约束

• 如果您事先知道最高的小部件的高度，只需使用 约束Row具有该高度的父级SizedBox。
• 如果没有，但您知道纵横比，请使用AspectRatio它，这是一个更便宜的小部件。

AspectRatio(
        aspectRatio: 2, // try diff numbers
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
)

• 如果您仍然不知道其中任何一个（这种情况很少见），那么还有一些其他选项可以手动实现布局LayoutBuilder或创建新的小部件。
• 如果这些工作都不能用作IntrinsicHeightRow 的父级作为最后的手段，因为它被认为是一个昂贵的小部件。您可以尝试测量性能（不科学，因为您需要真正的物理设备）：

main() async {
  testWidgets('test', (WidgetTester tester) async {
    final Stopwatch timer = new Stopwatch()..start();
    for (int index = 0; index < 1000; index += 1) {
      await tester.pumpWidget( MyApp());
    }
    timer.stop();
    debugPrint('Time taken: ${timer.elapsedMilliseconds}ms');
  });
}

概括

您不太可能需要将同级小部件的高度与高度未知的单个小部件的高度相匹配。如果确实如此，则必须首先像这样或通过 间接渲染和通知小部件IntrinsicHeight。

编辑

选项6：如果知道宽度，则可以使用Stack。

Container(
        color: Colors.grey,
        child: Stack(
          children: <Widget>[
            Container(child: Text("T", style: TextStyle(fontSize: 90),),color: Colors.green, width: 200,),
            Positioned.fill(left: 100,child: Container(child: Text("TTTTT", style: TextStyle(fontSize: 20),),color: Colors.blue)),
          ],
        ),
      ),

选项 7：如果您想使用ValueNotifier ValueListenableBuilder GlobalKey.

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  GlobalKey _rowKey = GlobalKey();
  final ValueNotifier<double> _rowHeight = ValueNotifier<double>(-1);

  @override
  void initState() {
    super.initState();

    WidgetsBinding.instance!.addPostFrameCallback(
        (_) => _rowHeight.value = _rowKey.currentContext!.size!.height);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        color: Colors.grey,
        child: ValueListenableBuilder<double>(
          valueListenable: _rowHeight,
          builder: (_, __, ___) => Row(
            key: _rowKey,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                child: Text(
                  "T",
                  style: TextStyle(fontSize: 90),
                ),
                color: Colors.green,
                width: 200,
              ),
              Container(
                  height: (_rowHeight.value<0)? null : _rowHeight.value,
                  child: Container(
                      child: Text(
                        "TTTTT",
                        style: TextStyle(fontSize: 20),
                      ),
                      color: Colors.blue)),
            ],
          ),
        ),
      ),
    );
  }
}