Flutter：扩展覆盖 ConstrainedBox

Question

我需要 aColumn扩展到受限宽度。因此它会一直扩展，maxWidth但如果没有足够的空间，也不介意变小。但Expanded忽略了ConstrainedBox.

    Row(
      children: [
        const Spacer(),
        Expanded(
          child: ConstrainedBox(
            constraints: const BoxConstraints(maxWidth: 50),
            child: Column(
              children: [
                Expanded(child: Container(color: Colors.red)),
                Expanded(child: Container(color: Colors.green)),
              ],
            ),
          ),
        ),
      ],
    )

这是我的完整上下文代码：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GetBuilder<TimerController>(
          builder: (_) => CustomBackground(
            color: _timerController.currentChild?.color ?? Colors.blue,
            child: SafeArea(
              child: Center(
                child: Padding(
                  padding:
                      EdgeInsets.symmetric(horizontal: AppSizes.pagePadding),
                  child: OrientationBuilder(
                    builder: (context, orientation) =>
                        (orientation == Orientation.portrait)
                            ? ConstrainedBox(
                                constraints: BoxConstraints(
                                  maxWidth: AppSizes.maxWidth,
                                  minWidth: AppSizes.minWidth,
                                ),
                                child: Column(
                                  children: [
                                    SizedBox(height: AppSizes.pagePadding),
                                    Expanded(child: TimerClock()),
                                    Expanded(
                                      child: Column(
                                        children: [
                                          NameText(),
                                          ControlButtons(),
                                          SizedBox(height: 25),
                                          Expanded(child: QueueList()),
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                              )
                            : Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Expanded(
                                    child: ConstrainedBox(
                                      constraints: BoxConstraints(
                                        maxWidth: AppSizes.maxWidth,
                                        minWidth: AppSizes.minWidth,
                                      ),
                                      child: Padding(
                                        padding: const EdgeInsets.symmetric(
                                            vertical: AppSizes.pagePadding),
                                        child: TimerClock(),
                                      ),
                                    ),
                                  ),
                                  SizedBox(width: AppSizes.pagePadding),
                                  Expanded(
                                    child: ConstrainedBox(
                                      constraints: BoxConstraints(
                                        maxWidth: AppSizes.maxWidth,  // this get's ignored
                                        minWidth: AppSizes.minWidth,
                                      ),
                                      child: Column(
                                        children: [
                                          Expanded(child: NameText()),
                                          ControlButtons(),
                                          SizedBox(height: 25),
                                          Expanded(child: QueueList()),
                                        ],
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

如果我删除Expanded，则Column具有固定宽度 ( maxWidth)，并且如果没有足够的空间，则会抛出错误。

Answer 1

将最外面的更改Expanded为Flexible. 那么孩子ConstrainedBox就会受到尊重。

就我而言，我还width:double.infinity向 的子级添加了 a Flexible，以强制小部件始终与 maxWidth 一样大，并且仅在没有空间时才减小其大小。

我的例子：

Flexible(
  child: Container(
    constraints: BoxConstraints(maxWidth: screenWidth * 0.25),
    width: double.infinity,
  ),
);

Answer 2

Expanded您在小部件中使用Column意味着它将尝试扩展以垂直填充空间（基于父级的高度而不是其宽度）。正如文档中提到的Expanded：

使用 Expanded 小部件可以使 Row、Column 或 Flex 的子项展开以填充沿主轴的可用空间（例如， 水平地填充 Row 或垂直地填充 Column）。

来源

由于您没有maxHeight在约束条件中精确指定 a ，因此它将被视为double.infinity。