Question

我是 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

Answer 1

使用容器中的宽度属性放置以下代码，它将为您工作。

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

Answer 2

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

Answer 3

为您的容器添加宽度并从中注释边距。边距占据了所有边距。

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

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

Flutter 子容器最大宽度

3 个答案: