flutter - PageView 容器不会限制最大宽度或高度抖动

Question

我似乎无法弄清楚为什么我的容器一直全屏显示。我正在尝试使容器具有最大宽度，因此当在桌面上查看容器时，容器看起来有点像在手机屏幕上查看时的卡片。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

int currentPage = 0;

class MyApp extends StatelessWidget {
  final PageController ctrl = PageController(viewportFraction: 0.8);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Builder(
          builder: (context) => PageView(
            scrollDirection: Axis.vertical,
            controller: ctrl,
            children: [
              Container(
                width: MediaQuery.of(context).size.width * .80,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(20)),
                    color: Colors.green,
                    boxShadow: [
                      BoxShadow(
                          color: Colors.grey[500],
                          blurRadius: 500,
                          offset: Offset(10, 10))
                    ]),
              ),
              Container(
                margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(20)),
                    color: Colors.blue,
                    boxShadow: [
                      BoxShadow(
                          color: Colors.grey[500],
                          blurRadius: 500,
                          offset: Offset(10, 10))
                    ]),
              ),
              Container(
                margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(20)),
                    color: Colors.orange,
                    boxShadow: [
                      BoxShadow(
                          color: Colors.grey[500],
                          blurRadius: 500,
                          offset: Offset(10, 10))
                    ]),
              ),
              Container(
                margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(20)),
                    color: Colors.red,
                    boxShadow: [
                      BoxShadow(
                          color: Colors.grey[500],
                          blurRadius: 500,
                          offset: Offset(10, 10))
                    ]),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这是容器正在做什么的图像。

问题

这是我希望它在桌面上查看时的样子

我想做的事

我也尝试添加这样的常量，但这也不起作用。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

int currentPage = 0;

class MyApp extends StatelessWidget {
  final PageController ctrl = PageController(viewportFraction: 0.8);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Builder(
          builder: (context) => PageView(
            scrollDirection: Axis.vertical,
            controller: ctrl,
            children: [
              Container(
                constraints: BoxConstraints(
                maxHeight: MediaQuery.of(context).size.height /4,
                maxWidth: MediaQuery.of(context).size.width * 0.8,),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(20)),
                    color: Colors.green,
                    boxShadow: [
                      BoxShadow(
                          color: Colors.grey[500],
                          blurRadius: 500,
                          offset: Offset(10, 10))
                    ]),
              ),
              Container(
                margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(20)),
                    color: Colors.blue,
                    boxShadow: [
                      BoxShadow(
                          color: Colors.grey[500],
                          blurRadius: 500,
                          offset: Offset(10, 10))
                    ]),
              ),
              Container(
                margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(20)),
                    color: Colors.orange,
                    boxShadow: [
                      BoxShadow(
                          color: Colors.grey[500],
                          blurRadius: 500,
                          offset: Offset(10, 10))
                    ]),
              ),
              Container(
                margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(20)),
                    color: Colors.red,
                    boxShadow: [
                      BoxShadow(
                          color: Colors.grey[500],
                          blurRadius: 500,
                          offset: Offset(10, 10))
                    ]),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

有人可以帮我这样做吗？

谢谢！

标签： flutterdebugging

Answer 1

将 PageView 放在一个容器内并给该容器提供约束。