如何在Flutter中动态调整容器大小？

Question

我正在使用一个高度为白色的容器：

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

我在其中添加了几个红色容器。当内部容器数量较少时，滚动效果非常完美，就像这样：

但是，随着内部容器数量的增加，滚动会将容器溢出，如下所示：

我发现的一个解决方法是增加白色容器的高度：

height: MediaQuery.of(context).size.height*7

但这会使应用程序看起来很丑，并且最终会在进一步增加红色容器数量时失败。如何解决这个问题？

程序代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(    
    home: Test(),
  ));
}



class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
          child: Scaffold(        
              body: Container(
                color: Colors.black,
                child: ListView(
                children: <Widget>[
                Padding(
                  padding: EdgeInsets.only(top: 15.0, left: 10.0),
                ),
                SizedBox(
                  height: 25.0,
                ),
                Padding(
                  padding: EdgeInsets.only(left: 20.0),
                  child: Row(
                    children: <Widget>[
                      Text(
                        'TEST',
                        style: TextStyle(
                            fontFamily: 'Montserrat',
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                            fontSize: 25.0),
                      ),
                      SizedBox(
                        width: 10.0,
                      ),
                      
                    ],
                  ),
                 
                ),

                SizedBox(height: 60.0,),

                
                


                
                Container(
                 margin: EdgeInsets.only(top:180.0,),
                  height: MediaQuery.of(context).size.height,
                  decoration: BoxDecoration(
                    color: Color(0xFFEEEEEE),
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(75.0),
                      topRight: Radius.circular(75.0),
                    ),
                  ),
                  child: ListView(
                    primary: false,
                    padding: EdgeInsets.only(
                      left: 15.0,
                      right: 15.0,
                      top: 20.0,
                    ),
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(
                          top: 30.0,
                        ),
                        child: Column(
                          children: <Widget>[
                            
                            Row(
                              children: <Widget>[
                                Expanded(
                                  child: Center(
                                    child: Text(
                                      'TEST',
                                      style: TextStyle(                                      
                                        color: Colors.black,
                                        fontSize: 30.0,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                            
                            SizedBox(height: 20.0,),
                            

                            Column(  
                              children: <Widget>[  
                                Container(  
                                  height: 150,
                                  color: Colors.red,
                                ),
                                SizedBox(height: 20,),

                                Container(  
                                  height: 150,
                                  color: Colors.red,
                                ),
                                SizedBox(height: 20,),

                                Container(  
                                  height: 150,
                                  color: Colors.red,
                                ),
                                SizedBox(height: 20,),

                                Container(  
                                  height: 150,
                                  color: Colors.red,
                                ),
                                SizedBox(height: 20,),

                                Container(  
                                  height: 150,
                                  color: Colors.red,
                                ),
                                SizedBox(height: 20,),

                                Container(  
                                  height: 150,
                                  color: Colors.red,
                                ),
                                SizedBox(height: 20,),

                                Container(  
                                  height: 150,
                                  color: Colors.red,
                                ),
                                SizedBox(height: 20,),                            
                             ],
                            )
                            
                            

                            
                                      
                           
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
            ],
          ),
              ),
      ),
    ),
    );
  }
}

- Shahbaz

---

你想让那些红色容器在白色容器内滚动吗？ - srikanth7785

我希望它们粘在白色容器上，而且白色容器可以滚动。 - Shahbaz

所以..红色的容器不应该可以滚动..对吧..!? - srikanth7785

是的@srikanth7785..我不想让红色的滚动。 - Shahbaz

Answer 1

好的，经过评论的一些建议，我自己找到了解决方案。

不要在白色容器内使用listview，我将其删除并用SingleChildScrollView包裹白色容器，同时也用Flexible进行包裹。

现在容器会根据其中的容器数量自动调整大小。

修复后的代码如下：

import 'package:flutter/material.dart';

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          body: Container(
            color: Colors.black,
            child: SingleChildScrollView(
              child: Column(
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.only(top: 15.0, left: 10.0),
                  ),
                  SizedBox(
                    height: 25.0,
                  ),
                  Padding(
                    padding: EdgeInsets.only(left: 20.0),
                    child: Row(
                      children: <Widget>[
                        Text(
                          'TEST',
                          style: TextStyle(
                              fontFamily: 'Montserrat',
                              color: Colors.white,
                              fontWeight: FontWeight.bold,
                              fontSize: 25.0),
                        ),
                        SizedBox(
                          width: 10.0,
                        ),
                      ],
                    ),
                  ),

                  SizedBox(
                    height: 60.0,
                  ),

                  //User INFO

                  SingleChildScrollView(
                    child: Flexible(
                      child: Container(
                        margin: EdgeInsets.only(
                          top: 180.0,
                        ),
                        decoration: BoxDecoration(
                          color: Color(0xFFEEEEEE),
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(75.0),
                            topRight: Radius.circular(75.0),
                          ),
                        ),
                        child: Padding(
                          padding: EdgeInsets.only(
                            left: 15.0,
                            right: 15.0,
                            top: 20.0,
                          ),
                          child: Column(
                            children: <Widget>[
                              Padding(
                                padding: const EdgeInsets.only(
                                  top: 30.0,
                                ),
                                child: Column(
                                  children: <Widget>[
                                    //greeting text
                                    Row(
                                      children: <Widget>[
                                        Expanded(
                                          child: Center(
                                            child: Text(
                                              'TEST',
                                              style: TextStyle(
                                                color: Colors.black,
                                                fontSize: 30.0,
                                                fontWeight: FontWeight.bold,
                                              ),
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),

                                    SizedBox(
                                      height: 20.0,
                                    ),
                                    //app work

                                    Column(
                                      children: <Widget>[
                                        Container(
                                          height: 150,
                                          color: Colors.red,
                                        ),
                                        SizedBox(
                                          height: 20,
                                        ),
                                        Container(
                                          height: 150,
                                          color: Colors.red,
                                        ),
                                        SizedBox(
                                          height: 20,
                                        ),
                                        Container(
                                          height: 150,
                                          color: Colors.red,
                                        ),
                                        SizedBox(
                                          height: 20,
                                        ),
                                        Container(
                                          height: 150,
                                          color: Colors.red,
                                        ),
                                        SizedBox(
                                          height: 20,
                                        ),
                                        Container(
                                          height: 150,
                                          color: Colors.red,
                                        ),
                                        SizedBox(
                                          height: 20,
                                        ),
                                        Container(
                                          height: 150,
                                          color: Colors.red,
                                        ),
                                        SizedBox(
                                          height: 20,
                                        ),
                                        Container(
                                          height: 150,
                                          color: Colors.red,
                                        ),
                                        SizedBox(
                                          height: 20,
                                        ),
                                      ],
                                    )

                                    //add button
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

- Shahbaz

Answer 2

首先，您需要通过减少额外的顶部填充和应用栏大小（如果该页面包含应用栏）来获取正确的屏幕高度。

为此，只需添加以下代码：

appBar: PreferredSize(
        preferredSize: Size.fromHeight(50),
        child: AppBar(
          automaticallyImplyLeading: false,
          elevation: 0,
          title: Text(
            "Hello"
          ),
          backgroundColor: const Color(0xFF005898),
        )),

然后将此添加到高度中。

double screenHeight = MediaQuery.of(context).size.height -
    50 -
    MediaQuery.of(context).padding.top; // Top Screen Height - appbarHeight - Top Padding(That top status bar on every phone)

然后一切都一样，但是，在SingleChildScrollView之前添加sizedBox，然后根据需要提供屏幕高度和宽度，然后在子级中添加scrollView和其余的代码。

- Rajasekaran K

Answer 3

尝试调整此容器的填充值，以实现所需的布局。

Container(padding: EdgeInsets.only(top: 35.0, ),
                 margin: EdgeInsets.only(top:180.0,),
                  height: MediaQuery.of(context).size.height,
                  decoration: BoxDecoration(
                    color: Color(0xFFEEEEEE),
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(75.0),
                      topRight: Radius.circular(75.0),
                    ),
                  ),

在我的情况下，我使用了 padding: EdgeInsets.only(top: 35.0, ), 结果

- griffins