widget名字：GridView

之前学习的listview 等都是一行一个widget 的，但是如果你需要给你治一行有N个widget 的情况呢？

功能：

滚动列表，大部分同listview

使用实例和代码：

import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
// import 'dart:js';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(// This is the theme of your application.//// Try running your application with "flutter run". You'll see the// application has a blue toolbar. Then, without quitting the app, try// changing the primarySwatch below to Colors.green and then invoke// "hot reload" (press "r" in the console where you ran "flutter run",// or simply save your changes to "hot reload" in a Flutter IDE).// Notice that the counter didn't reset back to zero; the application// is not restarted.primarySwatch: Colors.blue,),home: const MyHomePage(title: 'Flutter Demo Home Page'),);}
}class Car {const Car({required this.name,required this.imageUrl,});final String name;final String imageUrl;
}class MyHomePage extends StatefulWidget {const MyHomePage({super.key, required this.title});final String title;@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {//模型数组,图片的地址final List<Car> datas = [const Car(name: '保时捷918 Spyder',imageUrl:'https://upload-images.jianshu.io/upload_images/2990730-7d8be6ebc4c7c95b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',),const Car(name: '兰博基尼Aventador',imageUrl:'https://img0.baidu.com/it/u=248838925,2520884714&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',),const Car(name: '法拉利Enzo',imageUrl:'https://img0.baidu.com/it/u=2100209512,2318272656&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',),const Car(name: 'Zenvo ST1',imageUrl:'https://img0.baidu.com/it/u=2100209512,2318272656&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',),const Car(name: '迈凯伦F1',imageUrl:'https://img1.baidu.com/it/u=1986361094,4267690672&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',),const Car(name: '萨林S7',imageUrl:'https://img1.baidu.com/it/u=4009522506,1625354802&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313',),const Car(name: '科尼赛克CCR',imageUrl:'https://img1.baidu.com/it/u=4274211425,2430518865&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',),const Car(name: '布加迪Chiron',imageUrl:'https://img0.baidu.com/it/u=1477511855,2249772407&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=888',),const Car(name: '轩尼诗Venom GT',imageUrl:'https://img2.baidu.com/it/u=2860007480,1034201436&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',),const Car(name: '西贝尔Tuatara',imageUrl:'https://img0.baidu.com/it/u=426493897,1352349043&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',)];late final ScrollController _scrollController;@overridevoid initState() {// TODO: implement initStatesuper.initState();_scrollController = ScrollController()..addListener(() {//监听滚动的距离print(_scrollController.offset);});}@overrideWidget build(BuildContext context) {return Scaffold(// appBar: AppBar(//   title: Text(widget.title),// ),body://   children: List.generate(//       datas.length,//       (index) =>// Container(//             key: ValueKey(index),//             decoration: const BoxDecoration(//                 color: Colors.transparent,//                 borderRadius: BorderRadius.all(Radius.circular(10))),//             child: Card(//               clipBehavior: Clip.antiAlias, //抗锯齿//               // shape: RoundedRectangleBorder(//               //     borderRadius: BorderRadius.circular(15)),//圆角，下面是图片无法实现圆角功能//               elevation: 10,//               child: Image.network(//                 datas[index].imageUrl,//                 loadingBuilder: (context, child, loadingProgress) {//                   if (loadingProgress == null) {//                     return child;//                   }//                   return const CupertinoActivityIndicator();//                 },//                 fit: BoxFit.cover,//               ),//             ),//           )),// )GridView.builder(controller: _scrollController, //添加监听，同list viewitemCount: datas.length, //指定数据量gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, //交叉轴的widget 数量是mainAxisSpacing: 10, //主轴间距crossAxisSpacing: 10 //交叉轴的间距),itemBuilder: (context, int index) {return Container(decoration: const BoxDecoration(color: Colors.transparent,borderRadius: BorderRadius.all(Radius.circular(10))),child: Card(clipBehavior: Clip.antiAlias, //抗锯齿// shape: RoundedRectangleBorder(//     borderRadius: BorderRadius.circular(15)),//圆角，下面是图片无法实现圆角功能elevation: 10,child: Image.network(datas[index].imageUrl,loadingBuilder: (context, child, loadingProgress) {if (loadingProgress == null) {return child;}return const CupertinoActivityIndicator();},fit: BoxFit.cover,),));}),floatingActionButton: FloatingActionButton(onPressed: () {_scrollController.animateTo(0,duration: Duration(seconds: 1), curve: Curves.easeInOut);},child: const Icon(Icons.arrow_circle_up),),);}
}

    //下面的这种方式，比较适合数量widget 不多的情况如果比较多的话，还是需要告知下widget 的总量，flutter 才能更好的性能来处理GridView(//gridDelegate参数控制子控件的排列//SliverGridDelegateWithFixedCrossAxisCount: 交叉轴固定数量的情况//SliverGridDelegateWithMaxCrossAxisExtent:交叉轴 方向尽量的大,可以设置主轴和交叉轴的数量gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, //交叉轴的widget 数量是mainAxisSpacing: 10, //主轴间距crossAxisSpacing: 10 //交叉轴的间距),

截图：

【Flutter】【GridView】 GridView 滚动列表相关推荐

Flutter组件--GridView使用详情
GridView网格布局在实际项目中用的也非常多,当我们想让可以滚动的元素使用矩阵方式排列的时候.此时我们可以用网格列表组件GridView实现布局. GridView创建网格列表主要有下面三种方式 ...
android gridview 停止滚动
http://blog.csdn.net/yaphetzhao/article/details/50544105 参考上面的博客,关键代码我就贴出来吧: public void stopGridVie ...
universal image loader在listview/gridview中滚动时重复加载图片的问题及解决方法
universal image loader在listview/gridview中滚动时重复加载图片的问题及解决方法参考文章: (1)universal image loader在listview/ ...
数据绑定控件GridView展示商品列表
数据绑定控件GridView展示商品列表(1) 控件名称:GridView. 说明:通过表格方式实现数据的展示,并集成编辑.分页.排序等功能,比如显示商品列表. 控件名称:DropDownList. ...
GridView 横向滚动
GridView和ListView都是android比较重要的控件,但是横滚的控件不是太多. 这里介绍怎么把GridView横向滚动起来,看到其他网友也有相应的解决方法,自己只是把这些知识总结一下,供 ...
不一样角度带您了解 Flutter 中的滑动列表实现 | 开发者说·DTalk
本文原作者: 恋猫de小郭,原‍文发布于: GSYTech 本篇主要帮助剖析理解 Flutter 里的列表和滑动的组成,用比较通俗易懂的方式,从常见的 ListView 到 NestedScrollV ...
php gridview,GridView - [ Android中文手册 ] - 在线原生手册 - php中文网
GridView 版本:Android 2.2 r1 public final class GridView extendsAbsListView java.lang.Object android.v ...
用Vue来实现音乐播放器（十六）：滚动列表的实现
滚动列表是一个基础组件他是基于scroll组件实现的在base文件夹下面创建一个list-view文件夹里面有list-view.vue组件 <template><!-- 当 ...
微信小程序实现无限滚动列表
实现方式是利用小程序原声组件swiper,方向设置为纵向 :vertical='true'设置同时显示的滑块数量:display-multiple-items='4'设置自动轮播:autoplay:' ...

【Flutter】【GridView】 GridView 滚动列表

widget名字：GridView

功能：

使用实例和代码：

截图：

【Flutter】【GridView】 GridView 滚动列表相关推荐

最新文章

热门文章