Flutter - 如何让方形小部件连续占用其最大可能空间？答案

【问题标题】：Flutter - How can I make a square widget take up its maximum possible space in a row?Flutter - 如何让方形小部件连续占用其最大可能空间？
【发布时间】：2021-04-02 16:10:02
【问题描述】：

我有一个CustomPaint，它需要是一个 1:1 的正方形，我需要把它放在一个 Row 中。可用的水平和垂直空间可以变化，所以我需要正方形的长度和宽度都是最小的最大约束。

我怎样才能实现这种行为？

我已经尝试使用 LayoutBuilder 来解决这个问题：

Row(
  children: [
    ...,
    LayoutBuilder(
      builder: (context, constraints) {
        final size = min(constraints.maxWidth, constraints.maxHeight);
        return SizedBox(
          width: size,
          height: Size,
          child: CustomPaint(...),
        ),
      },
    ),
  ]
),

但是，这不起作用，因为Row 提供了无限的水平约束 (maxWidth == double.infinity)。使用FittedBox 小部件也会因同样的原因而失败。

将LayoutBuilder 包装在Expanded 小部件中为其提供了有界的最大宽度，但我需要在Row 中旁边有另一个小部件，因此这是不合适的。在这种情况下，Flexible 的行为也类似于 Expanded。

【问题讨论】：

标签： flutter flutter-layout flutter-row

【解决方案1】：

我认为你可以从 AspectRatio 小部件中得到你想要的东西......如果你告诉它 1:1，那么它会尝试制作一个正方形，除非完全不可能。

【讨论】：

很遗憾，AspectRatio 使用高度来计算宽度。这在这种情况下是不合适的，因为它没有考虑任何宽度限制。
这可能没有按照书面形式回答问题，但它确实解决了我发现这个问题时遇到的问题。谢谢！

【解决方案2】：

请尝试下面的代码，使用 Align 小部件将小部件限制为正方形：

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

final Color darkBlue = const Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          flex: 1,
          child: Container(),
        ),
        Expanded(
          flex: 2,
          child: LayoutBuilder(
            builder: (context, constraints) {
              final size = min(constraints.maxWidth, constraints.maxHeight);
              return Align(
                alignment: Alignment.centerRight,
                child: Container(
                  height: size,
                  width: size,
                  color: Colors.amber,
                ),
              );
            },
          ),
        ),
        // Expanded(
        //   flex: 1,
        //   child: Container(),
        // ),
      ],
    );
  }
}

【讨论】：

感谢您的建议，但正如我在问题中所说，我不能使用Expanded。

【解决方案3】：

我最终解决了这个问题，方法是将保持小部件保持在树上的职责。使用方形小部件的小部件更了解它们所显示的其他内容，并且更有能力为其提供正确的约束。

【讨论】：

仍然欢迎回答，因为我还没有真正找到我的问题的答案，我刚刚解决了这个问题。