Question

在列表视图内添加gridview时，如何解决颤振布局中的滚动问题。
在android studio java中，我们使用NestedScrollView解决此类问题
什么是扑扑的解决方案？
我需要继续滚动，而自定义视图和gridview的listview不会出现任何问题。
现在，gridview仅允许滚动gridview
如果我滚动网格视图，则顶部imageview不滚动。如何解决此问题问题？

body: 
    ListView(
  children: <Widget>[
    new Image.network("https://www.gizbot.com/img/2013/11/23-weekend-deals-top-10-latest-smartphones.jpg"),
    Container(
    height: 300.0,
    child: GridView.count(
      crossAxisCount: 3,
      childAspectRatio: .6,
      children: _list.map((p) => ProductManagment(p)).toList(),
    ),
  ) 
  ],
)

添加@deniss答案后

已解决

Answer 1

您应该像下面那样使用Column Widget，而不是使用ListView。

    body: 
        Column(
      children: <Widget>[
        Container (
         height: 150.0, // Set as you want
        child: Image.network("https://www.gizbot.com/img/2013/11/23-weekend-deals-top-10-latest-smartphones.jpg")),
        Container(
        height: 300.0,
        child: GridView.count(
          crossAxisCount: 3,
          childAspectRatio: .6,
          children: _list.map((p) => ProductManagment(p)).toList(),
        ),
      ) 
      ],
    )

Because of `GridView` itself has scroll effect.

已编辑

：

Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
          child: ListView(
            children: <Widget>[
              Column(
                children: <Widget>[
                  Container(
                    height: 200,
                    child: Image.network(
                        "https://www.gizbot.com/img/2013/11/23-weekend-deals-top-10-latest-smartphones.jpg"),
                  ),
                  ConstrainedBox(
                    constraints: BoxConstraints(
                      minHeight: 80, // Set as you want or you can remove it also.
                      maxHeight: double.infinity,
                    ),
                    child: Container(
                      child: GridView.count(
                        crossAxisCount: 3,
                        shrinkWrap: true,
                        scrollDirection: Axis.vertical,
                        physics: NeverScrollableScrollPhysics(),
                        childAspectRatio: .6,
                        children: _list.map((p) => ProductManagment(p)).toList(),
                      ),
                    ),
                  )
                ],
              ),
            ],
          ),
        ));

您必须将ConstrainedBox与集合maxHeight: double.infinity和GridView.count集合shrinkWrap: true,一起使用。并移除容器高度300。

如果您想更改

 Container(
                    height: 200,
                    child: Image.network(
                        "https://www.gizbot.com/img/2013/11/23-weekend-deals-top-10-latest-smartphones.jpg"),
                  ),

致敬

 Image.network("https://www.gizbot.com/img/2013/11/23-weekend-deals-top-10-latest-smartphones.jpg")

比您可以更改的地方。

Answer 2

我有同样的问题。但是，我不希望列/行附带的Overflowed by...问题，而是在我的physics: ScrollPhysics()中添加GridView.count来解决此问题。从this response找到了我对类似问题的答案。

Answer 3

使用这个

   child: GridView.count(
    crossAxisCount: 2,
    crossAxisSpacing: 2.0,
    mainAxisSpacing: 2.0,
    shrinkWrap: true,
    scrollDirection: Axis.vertical,
    physics: NeverScrollableScrollPhysics(),
    children: List.generate(choices.length, (index) {
      return Center(
        child: new Column(
          children: [
            new Expanded(
              child: SelectCard(choice: choices[index]),
            ),
          ],
        ),
      );
    }),
  ));

和完整代码以便更好地解释

    import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;

var url = "https://miro.medium.com/max/2160/1*9JzKFil-Xsip742fdxDqZw.jpeg";

class Dashboard extends StatefulWidget {
  _Dashboard createState() => _Dashboard();
}

Widget _buildAvatar(BuildContext context, Orientation orientation) {
  return Container(
    height: 300.0,
    color: Colors.blue,
    child: Center(
      child: CircleAvatar(
        backgroundColor: Colors.white,
        child: Text('RR'),
      ),
    ),
  );
}

Widget _buildFields(BuildContext context) {
  return Container(
      color: Colors.white,
      child: GridView.count(
        crossAxisCount: 2,
        crossAxisSpacing: 2.0,
        mainAxisSpacing: 2.0,
        shrinkWrap: true,
        scrollDirection: Axis.vertical,
        physics: NeverScrollableScrollPhysics(),
        children: List.generate(choices.length, (index) {
          return Center(
            child: new Column(
              children: [
                new Expanded(
                  child: SelectCard(choice: choices[index]),
                ),
              ],
            ),
          );
        }),
      ));
}

class _Dashboard extends State<Dashboard> {
  @override
  Widget build(BuildContext context) {
    return OrientationBuilder(builder: (context, orientation) {
      return ListView(
        children: <Widget>[
          Container(
            height: 200,
            child: Image.network(
                "https://www.gizbot.com/img/2013/11/23-weekend-deals-top-10-latest-smartphones.jpg"),
          ),
          _buildFields(context),
        ],
      );
    });
  }
}

class Choice {
  const Choice({this.title, this.icon});
  final String title;
  final IconData icon;
}

const List<Choice> choices = const <Choice>[
  const Choice(title: 'Home', icon: Icons.home),
  const Choice(title: 'Contact', icon: Icons.contacts),
  const Choice(title: 'Map', icon: Icons.map),
  const Choice(title: 'Phone', icon: Icons.phone),
  const Choice(title: 'Camera', icon: Icons.camera_alt),
  const Choice(title: 'Setting', icon: Icons.settings),
  const Choice(title: 'Album', icon: Icons.photo_album),
  const Choice(title: 'WiFi', icon: Icons.wifi),
];

class SelectCard extends StatelessWidget {
  const SelectCard({Key key, this.choice}) : super(key: key);
  final Choice choice;

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.display1;
    return Container(
      child: GridView.builder(
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 1,
          childAspectRatio: 1,
        ),
        itemBuilder: (contxt, indx) {
          return Card(
            elevation: 4,
            margin: EdgeInsets.all(8),
            color: Colors.white70,
            child: Padding(
              padding: const EdgeInsets.only(top: 25),
              child: Container(
                width: 4,
                child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      new Expanded(
                        child: new Container(
                          child: new Icon(
                            choice.icon,
                            color: Colors.black,
                            size: 50.0,
                          ),
                        ),
                        flex: 2,
                      ),
                      new Expanded(
                        child: new Container(
                            margin: EdgeInsets.only(top: 12),
                            child: new Text(
                              choice.title,
                              style:
                                  TextStyle(fontSize: 16, color: Colors.black),
                            )),
                        flex: 1,
                      ),
                    ]),
              ),
            ),
          );
        },
      ),
    );
  }
}

当GridView还是孩子时，如何解决列表视图中的滚动？

3 个答案: