Flutter Web 忽略调整大小

Question

我想让我的网络应用程序在屏幕变小时不会resize/responsive。例如，当我减小浏览器尺寸而不是适应宽度和高度时，我希望网络应用程序忽略它，用户只需上下左右滚动即可查看网络。

Answer 1

使用固定 height/width 属性

的 SizedBox

Answer 2

我建议您在大小低于您的应用预期时使用 LayoutBuilder and eventually add a SingleChildScrollView。

这个 MinSize 小部件完成了它。

/// Starts scrolling [child] vertically and horizontally when the widget sizes
/// reaches below [minWidth] or [minHeight]
class MinSize extends StatefulWidget {
  const MinSize({
    Key? key,
    this.minWidth,
    this.minHeight,
    required this.child,
  }) : super(key: key);

  final Widget child;

  final double? minWidth;

  final double? minHeight;

  @override
  State<MinSize> createState() => _MinSizeState();
}

class _MinSizeState extends State<MinSize> {
  late final _verticalController = ScrollController();
  late final _horizontalController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final shouldScrollVertical = widget.minHeight != null &&
            constraints.maxHeight <= widget.minHeight!;
        final contentHeight =
            shouldScrollVertical ? widget.minHeight : constraints.maxHeight;
        final verticalPhysics = shouldScrollVertical
            ? const AlwaysScrollableScrollPhysics()
            : const NeverScrollableScrollPhysics();

        final shouldScrollHorizontal =
            widget.minWidth != null && constraints.maxWidth <= widget.minWidth!;
        final contentWidth =
            shouldScrollHorizontal ? widget.minWidth : constraints.maxWidth;
        final horizontalPhysics = shouldScrollHorizontal
            ? const AlwaysScrollableScrollPhysics()
            : const NeverScrollableScrollPhysics();

        return Scrollbar(
          controller: _verticalController,
          thumbVisibility: shouldScrollVertical,
          child: SingleChildScrollView(
            controller: _verticalController,
            scrollDirection: Axis.vertical,
            physics: verticalPhysics,
            child: Scrollbar(
              interactive: true,
              controller: _horizontalController,
              thumbVisibility: shouldScrollHorizontal,
              child: SingleChildScrollView(
                controller: _horizontalController,
                scrollDirection: Axis.horizontal,
                physics: horizontalPhysics,
                child: UnconstrainedBox(
                  child: SizedBox(
                    height: contentHeight,
                    width: contentWidth,
                    child: widget.child,
                  ),
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}

或者，尝试 InteractiveViewer 在应用程序中自由移动内容 window。

Flutter Web 忽略调整大小

Flutter web ignore resize

dart

flutter

flutter-layout