颤振子容器最大宽度答案

【问题标题】：Flutter children containers max width颤振子容器最大宽度
【发布时间】：2021-05-15 22:34:16
【问题描述】：

我是 Flutter 新手，正在努力让我的容器以最大宽度容纳。我尝试过使用这里回答的各种方式，但由于某种原因，容器只是忽略了约束。

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: PageView(
              scrollDirection: Axis.vertical,
              controller: ctrl,
              children: [
            Container(
              margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),
              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))
                  ]),
            ),
          ])),
    );
  }
}

我希望我的容器在我扩大浏览器时看起来像这样 enter image description here

但它看起来像这样 enter image description here

如果有人可以帮助我弄清楚为什么我的容器总是无视我的限制，这将有助于我分配

谢谢！

添加宽度后出错：MediaQuery.of(context).size.width,enter image description here

【问题讨论】：

标签： flutter constraints

【解决方案1】：

为您的容器添加宽度并从中添加注释边距。边距正在四面八方。

width: MediaQuery.of(context).size.width,

// margin: EdgeInsets.only(bottom: 50, right: 30, left: 30),

【讨论】：

我遇到了一个错误。我用错误图片更新了问题
为了使用 MediaQuery，您需要创建一个 Stateful Widget。类 MyApp 扩展 StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyPage(), ); } } 创建您的页面- MyPage() 通过删除边距，您可以访问整个页面的宽度和高度。
所以我实现了它，我的容器从屏幕上消失了

【解决方案2】：

Padding(padding:EdgeInsets.only(left:15,right:15),child:Container(width:MediaQuery.of(context).size.width,child:YourChild()))

【讨论】：

【解决方案3】：

在容器中使用 width 的属性，把下面的代码写进去就可以了。

width: MediaQuery.of(context).size.width

【讨论】：