flutter 中listview中嵌套GridView正确使用姿势

最新推荐文章于 2022-07-04 08:15:26 发布

逐流间隔年

最新推荐文章于 2022-07-04 08:15:26 发布

阅读量2.5k

点赞数 2

分类专栏： flutter开发

本文链接：https://blog.csdn.net/senkai123/article/details/102584566

版权

flutter开发专栏收录该内容

32 篇文章 3 订阅

订阅专栏

ListView和GirdView都是滚动Widget 两个部件嵌套就会存在滚动冲突，存在2个冲突，一个是滑动时间冲突，还有一个是内容显示不全解决办法：
在listview

shrinkWrap: true,//增加
 physics: NeverScrollableScrollPhysics()//解决滑动事假冲突

GridView

shrinkWrap: true,//增加

使用完整例子

import 'package:demoflutter/utils/utlis.dart';
import 'package:flutter/material.dart';

class ShortcutEntry extends StatelessWidget {
  BuildContext context;

  @override
  Widget build(BuildContext context) {
    this.context = context;
    // TODO: implement build
    return Container(
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(6))),
      child: GridView.count(
        //如果内容不足，则用户无法滚动 而如果[primary]为true，它们总是可以尝试滚动。
        primary: false,
        //禁止滚动
        physics: NeverScrollableScrollPhysics(),
        //是否允许内容适配
        shrinkWrap: true,
        //一横几个
        crossAxisCount: 5,
        //宽高比例
        childAspectRatio: 1.2,
        //子类item垂直占比宽度
        mainAxisSpacing: 10,
        //子类item水平占比宽度
        crossAxisSpacing: 10,
        //GridView padding
        padding: EdgeInsets.all(5),
        children: getWidgetList(),
      ),
    );
  }


  List<Widget> getWidgetList() {
    List<Widget> lists = [];
    for (int i = 0; i < 5; i++) {
      lists.add(_item(i));
    }
    return lists;
  }


  Widget _item(int index) {
    return Utils.setGesture(
        context,
        Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                child: Column(
                  children: <Widget>[
                    Icon(Icons.stars, color: Colors.orange),
                    Padding(
                      padding: EdgeInsets.only(top: 5),
                      child: Text(
                        '第三方',
                        style: TextStyle(
                          fontSize: 13,
                          color: Color(0xFF333333),
                        ),
                      ),
                    )
                  ],
                ),
              )
            ],
          ),
        ), () {
      Utils.showToast(context, '点击了 $index');
    });
  }



}

参考例子：https://blog.csdn.net/ruoshui_t/article/details/91344690