flutter 对齐在列中包含的行内不起作用

Question

我有一行包含 3 个项目:一个 IconButton、一个 Text 和一个设置了宽度的 SizedBox。该行位于 Column 内，其子级为 Expanded。

我正在尝试让 IconButton 与行的顶部对齐。我认为将其包装在 Align 中并与 topCenter 对齐会起作用，但事实并非如此:

我不明白为什么。代码如下:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              Row(
                children: [
                  Align(
                    alignment: Alignment.topCenter,
                    child: IconButton(onPressed: () {}, icon: Icon(Icons.arrow_back)),
                  ),
                  const Expanded(child: Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat")),
                  SizedBox(
                    width: 80,
                    child: AspectRatio(
                      aspectRatio: 0.7,
                      child: Placeholder(),
                    ),
                  )
                ],
              ),
              const Expanded(
                child: Placeholder(),
              )
            ],
          ),
        ),
      ),
    );
  }
}

有趣的是，如果我删除外部Column，Align 就会起作用:

我想了解原因以及如何解决此布局问题。请注意，我不想将 Row crossAxisAlignment 设置为开始，因为这会使包含 Placeholder 的 SizedBox 错位到顶部而不是行的中心。

Answer 1

您可以将 Row 包装在 IntrinsicHeight 中来修复它，如下所示:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              IntrinsicHeight(
                child: Row(
                  children: [
                    Align(
                      alignment: Alignment.topCenter,
                      child: IconButton(onPressed: () {}, icon: Icon(Icons.arrow_back)),
                    ),
                    const Expanded(child: Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat")),
                    SizedBox(
                      width: 80,
                      child: AspectRatio(
                        aspectRatio: 0.7,
                        child: Placeholder(),
                      ),
                    )
                  ],
                ),
              ),
              const Expanded(
                child: Placeholder(),
              )
            ],
          ),
        ),
      ),
    );
  }
}

这是因为 Row 在渲染所有子项之前不知道它的高度。所以Align不知道它的高度应该是多少。如果没有Column，它确实知道，因为Row知道它将拥有所有可用空间