Flutter：小部件的动态高度必须是给定数字的倍数

Question

小部件具有不同的高度，即动态。我需要高度是 20 的倍数，所以它适合我创建的网格。

如果需要扩展，是否可以强制小部件一次增加 20 像素的高度？

换句话说，我需要它捕捉到我预先定义的网格。

import 'package:flutter/material.dart';

class TreeNode extends StatelessWidget {
  const TreeNode({
    Key? key,
    required this.child,
    required this.minSize,
    required this.maxSize,
  }) : super(key: key);

  final Widget child;
  final int minSize, maxSize;

  @override
  Widget build(BuildContext context) {
    return FittedBox(
      child: Container(
        color: Colors.green,
        width: MediaQuery.of(context).size.width <= 400
            ? minSize.toDouble()
            : maxSize.toDouble(),
        height: 200, // needs to be changed
        child: Visibility(
          visible: true,
          child: child,
          maintainSize: true,
          maintainState: true,
          maintainAnimation: true,
        ),
      ),
    );
  }
}

感谢您的帮助。现在的样子示例：

编辑： 我想到了。对于任何其他有类似问题的人。

我将 IntrinsicWidth() 与 stepHeight 和 stepWidth 一起使用做起来可能比较贵，但是很符合我的需求。

新代码：

import 'package:flutter/material.dart';

class TreeNode extends StatelessWidget {
  const TreeNode({
    Key? key,
    required this.child,
    required this.minSize,
    required this.maxSize,
  }) : super(key: key);

  final Widget child;
  final int minSize, maxSize;

  @override
  Widget build(BuildContext context) {
    return IntrinsicWidth(
      stepHeight: 20,
      stepWidth: 20,
      child: Container(
        color: Colors.green,
        width: MediaQuery.of(context).size.width <= 400
            ? minSize.toDouble()
            : maxSize.toDouble(),
        child: Visibility(
          visible: false,
          child: child,
          maintainSize: true,
          maintainState: true,
          maintainAnimation: true,
        ),
      ),
    );
  }
}

Answer 1

要添加 20 像素： height + 20.0;

要相乘 只需添加一个您选择的因子（也可以是动态的）：height * 1.5 或 height * dynamicFactor.

如果你想有条件地，你可以添加一个布尔值shouldMultiply并使用它像这样切换：givenValue * (shouldMultiply ? 20 : 1);

使用您的代码示例：

import 'package:flutter/material.dart';

class TreeNode extends StatelessWidget {
  const TreeNode({
    Key? key,
    required this.child,
    required this.minSize,
    required this.maxSize,
  }) : super(key: key);

  final Widget child;
  final int minSize, maxSize;
  final factor = 1.15; // +15%
  bool requiresFactor; // Either change this via method you define and hook up to
                       // the ontap handler of a gesture detector (which can wrap your FittedBox),

  @override
  Widget build(BuildContext context) {
    return FittedBox(
      child: Container(
        color: Colors.green,
        width: MediaQuery.of(context).size.width <= 400
            ? minSize.toDouble()
            : maxSize.toDouble(),
        height: 200 + (requiresFactor ? 20.0 : 0.0),
        // or height: 200 * (shouldMultiply ? factor : 1),
        child: Visibility(
          visible: true,
          child: child,
          maintainSize: true,
          maintainState: true,
          maintainAnimation: true,
        ),
      ),
    );
  }
}

编辑（正如 OP 正确判断的那样）： IntrinsicWidth class 可用于捕捉到 stepWidth 或 stepHeight 的倍数，并将它们各自的属性设置为非空值。 [警告：] 然而，正如文档警告您的那样，“这个 class 相对昂贵，因为它在最终布局阶段之前添加了一个推测性布局通道。 尽可能避免使用它。”。因此，您应该考虑为您的案例编写自己的简化“解决方法”逻辑，因为这里 class 并不是真正必要的。所以，一定要试一试——如果你发现问题更新你的问题，评论我，我会尽力帮助你:)

Flutter：小部件的动态高度必须是给定数字的倍数

Flutter: Dynamic Height of Widgets must be multiple of a given number

flutter

flutter-layout