Question

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

是否有一种方法可以控制它们扩展的范围？我希望一个窗口小部件仅扩展到一定大小，然后将其余窗口小部件提供给其他窗口小部件。

编辑：

因为我想得到两个可能引起误解的答案，所以我想澄清一下。我想要这样的东西：

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

这意味着此扩展小部件的弹性为1，但绝对不能小于50且大于200。

Answer 1

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

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

在 Flutter 中可能有很多方法可以做到这一点。

这是一个有效的 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 2

您正在寻找ConstrainedBox。

您可以同时创建List和Widget的{{1}}个ConstrainedBox，如下所示：

Expanded

Answer 3

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

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

Answer 4

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

Answer 5

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

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

与其直接展开所需的widget，不如先展开并对齐一个容器，然后将约束框设置为容器的子项，然后将所需的小部件作为约束框的子项插入。通过这种方式，我设法将小部件精确地呈现为它需要的大小，但高度不会超过 500。

Answer 6

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

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

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

6 个答案: