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,),                            
                             ],
                            )
                            
                            

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

Answer 1

要获得所需的布局，请尝试使用此容器的填充值

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, ),

结果

Answer 2

好吧，在评论中提出了一些建议之后，我自己找到了解决方法。

我没有在白色容器中使用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
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

如何动态调整容器大小？

2 个答案: