Блог

У меня есть следующий контейнер, который на самом деле больше экрана. Но похоже, что 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,
            ),
          ),
        ),
      ),
    );
  }
}
 

Размер контейнера будет изменен с помощью дескриптора изменения размера. Я согласен с тем, что контейнер не имеет ширины больше экрана, пока он не повернут, но когда он повернут, я хочу, чтобы контейнер имел ширину, основанную на дескрипторе изменения размера, который может быть больше экрана. Есть ли какой-либо обходной путь для этого? Любая помощь будет принята с благодарностью.

Я нашел способ, и это использовать Stack amp; Positioned:

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

Отрегулируйте высоту и ширину Positioned , чтобы ограничить ширину и высоту контейнера.

Из того, что я знаю, невозможно иметь контейнер больше экрана. Вы должны принять во внимание, что идея заключается в том, чтобы приложение запускалось на экранах разного размера, поэтому я лично не вижу смысла давать статические значения, когда вы можете использовать динамические, чтобы они соответствовали размерам разных устройств.