列中扩展小部件的特定最小和最大尺寸

Question

我有一个带有一组扩展小部件的列。

有没有办法控制它们扩展的范围？我希望一个小部件仅扩展到一定大小，并使其余的小部件可供其他小部件使用。

编辑：

因为我得到了两个可能具有误导性的答案，所以我想澄清一下。我想要这样的东西：

Expanded(flex: 1, minSize: 50, maxSize: 200, child: ...)

这意味着这个展开的小部件的 Flex 值为 1，但永远不应该小于 50 且大于 200。

Answer 1

简而言之：如果不计算尺寸，就没有简单的答案。

首先你需要知道：

Widget with Size

主导行/列中的可用大小，然后灵活/扩展共享剩余空间。

Column(
  children:[
    Flexible(...
    Expanded(...
    SizedBox(...  // <- dominates the available size first
  ]
)

并且父窗口小部件支配子窗口小部件的大小：

Column(
  children:[
    Flexible(flex: 1),
    Flexible(
      flex: 1,
      child: SizedBox(...  // size can't be larger than 1/2
  ]
)

尺寸超过或者不足，都是选择问题。我可以在下面展示一些简单的例子：

（顺便说一句：我用 SizedBox 替换 ConstrainedBox，因为我们只使用

maxWidth/maxHeight

。检查 理解约束）

可弯曲最大尺寸

这个案例很简单，只需要Flexible + SizedBox:

Row(
  children: [
  Flexible(flex: 1, child: _textWidget('Flex:1')),
  Flexible(
    flex: 1,
    child: SizedBox(
      width: 300,
      child: _textWidget('Flex: 1, max: 300'),
      ),
    ),
  ],
),

具有最小/最大尺寸的 Flex

这种情况需要总大小（来自LayoutBuilder）和小部件大小的百分比：

LayoutBuilder(
  builder: (context, constraint) {
    final maxWidth = constraint.maxWidth;
    
    return Row(
      children: [
        Flexible(flex: 1, child: _textWidget('Flex:1')),
        SizedBox(
          width: (maxWidth / 3).clamp(200, 300),
          child: _textWidget('Flex:1, min: 200, max: 300'),
        ),
        SizedBox(
          width: (maxWidth / 3).clamp(200, 300),
          child: _textWidget('Flex:1, min: 200, max: 300'),
        ),
      ],
    );
  }
)

代码示例

https://dartpad.dev/?id=f098f9764acda1bcc58017aa0bc0ec09

Answer 2

据我所知，Flutter 中没有优雅的预构建方法可以做到这一点。

@HugoPassos 的回答仅部分完整。 ConstrainedBox 不会改变其大小，除非其内容改变大小。我相信您正在寻找的是，如果行的 1/4 大于最小值并高于最大值，则该框为行宽度的 1 / 4。

这是一个工作 main.dart，它可以用行中的宽度完成工作，尽管您可以轻松地使用列中的高度：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;
  MyHomePage({required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: LayoutBuilder(builder: (context, constraints) {
          return Center(
              child: Row(
            children: [
              ConstrainedWidthFlexible(
                minWidth: 50,
                maxWidth: 200,
                flex: 1,
                flexSum: 4,
                outerConstraints: constraints,
                child: SizeLogger(
                  child: Container(
                      color: Colors.red,
                      width: Size.infinite.width,
                      height: Size.infinite.height,
                      child: Text('click me to log my width')),
                ),
              ),
              Flexible(
                flex: 1,
                fit: FlexFit.tight,
                child: Container(color: Colors.green),
              ),
              Flexible(
                flex: 2,
                fit: FlexFit.tight,
                child: Container(color: Colors.blue),
              ),
            ],
          ));
        }));
  }
}

class SizeLogger extends StatelessWidget {
  final Widget child;
  SizeLogger({required this.child});
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () => {print('context.size!.width ${context.size!.width}')},
        child: child);
  }
}

class ConstrainedWidthFlexible extends StatelessWidget {
  final double minWidth;
  final double maxWidth;
  final int flex;
  final int flexSum;
  final Widget child;
  final BoxConstraints outerConstraints;
  ConstrainedWidthFlexible(
      {required this.minWidth,
      required this.maxWidth,
      required this.flex,
      required this.flexSum,
      required this.outerConstraints,
      required this.child});
  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints(
        minWidth: minWidth,
        maxWidth: maxWidth,
      ),
      child: Container(
        width: _getWidth(outerConstraints.maxWidth),
        child: child,
      ),
    );

  }

  double _getWidth(double outerContainerWidth) {
    return outerContainerWidth * flex / flexSum;
  }
}

Answer 3

在 Rows 中使用 ConstrainedBox 时，我的 minWidth 被忽略，而 maxWidth 被用作固定大小。

Answer 4

您正在寻找

ConstrainedBox

。

您可以使用

List

和

Widget

创建

ConstrainedBox

的

Expanded

，如下所示：

Row(
  children: [
    ConstrainedBox(
      child: Container(color: Colors.red),
      constraints: BoxConstraints(
        minWidth: 50,
        maxWidth: 100,
      ),
    ),
    Expanded(
      child: Container(color: Colors.green),
    ),
    Expanded(
      child: Container(color: Colors.blue),
    ),
  ],
),

Answer 5

是的！有一种方法可以控制行或列（无界小部件）内的 maxHeight 和 maxWidth。您可以使用 Widget LimitedBox，其中 maxHeight 和 maxWidth 参数仅适用于无界 Widget。 https://api.flutter.dev/flutter/widgets/LimitedBox-class.html

Column(
  children: [
    LimitedBox(
      maxHeight: 200,
      maxWidth: 200,
      child: Container(),
    )
  ],
),

Answer 6

这对我有用。请检查一下。

Expanded(
  child: Align(
    alignment: Alignment.topCenter,
    child: Container(
      child: ConstrainedBox(
        constraints:
            BoxConstraints(maxHeight: 500),
        child: Container(
          child: DesiredWidget(),
        ),
      ),
    ),
  ),
)

您不应直接展开所需的小部件，而是应展开并对齐容器，然后将 constrainedbox 设置为容器的子项，然后将所需的小部件插入为 constrainedbox 的子项。 通过这种方式，我成功地渲染了小部件，使其达到所需的大小，但高度永远不会超过 500。

Answer 7

您可以使用约束框来使用最小和最大宽度的范围，如下所示：

Row(
      children: <Widget>[
        Text("Text 1"),
        ConstrainedBox(
          constraints: BoxConstraints(maxHeight: 30, maxWidth: 40, minWidth: 30),
        ),
        Text("Text 2")
      ],
    )