有没有办法让容器的宽度大于 Flutter 中的屏幕？答案

【问题标题】：Is there a way to have width of container bigger than the screen in Flutter?有没有办法让容器的宽度大于 Flutter 中的屏幕？
【发布时间】：2020-12-11 14:20:09
【问题描述】：

我有一个实际上比屏幕大的以下容器。但似乎flutter不允许容器宽度大于屏幕。

import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Test(),
    );
  }
}

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          print("Tapped");
        },
        child: Transform.rotate(
          angle: math.pi / 4,
          child: Container(
            height: 200,
            width: 700,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

我尝试改用Transform.scale，但GestureDetector 不适用于大于屏幕的容器部分。

import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Test(),
    );
  }
}

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          print("Tapped");
        },
        child: Transform.rotate(
          angle: math.pi / 4,
          child: Transform(
            transform: Matrix4.diagonal3Values(4, 1, 1),
            child: Container(
              height: 200,
              width: 300,
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }
}

将使用调整大小句柄调整容器大小。我可以接受容器在不旋转时宽度不大于屏幕，但是当它旋转时，我希望容器具有基于调整大小手柄的宽度，该手柄可以大于屏幕。有什么解决方法吗？任何帮助将不胜感激。

【问题讨论】：

为什么要求容器比屏幕大？
@GrahamD 容器将使用调整大小手柄调整大小。我的意思是容器在不旋转的情况下宽度不大于屏幕我可以接受。但是当它旋转到一定程度时，我希望容器具有基于调整大小句柄的宽度。

标签： flutter dart

【解决方案1】：

我找到了一种方法，那就是使用 Stack & Positioned：

Stack(
    children: [
        Positioned(top: 0,
          left: 0,
          height: 200,
          width: 1000,
          child: Container(height: 200, width: 1000, color: Colors.blue),
        ),
    ],
),

调整Positioned 的高度和宽度以限制容器的宽度和高度。

【讨论】：

【解决方案2】：

据我所知，容器不可能比屏幕大。你必须考虑到这个想法是让应用程序在不同尺寸的屏幕上运行，所以当你可以使用动态值以适应不同设备的尺寸时，我个人认为给出静态值没有意义。

【讨论】：