Flutter——GridView组件（网格列表组件）
2024-09-05 08:00:46
GridView组件的常用参数：
| 名称 | 类型 | 说明 |
|
scrollDirection
|
Axis
|
滚动方法
|
| padding |
EdgeInsetsGeometry
|
内边距
|
|
resolve
|
bool
|
组件反向排序
|
|
crossAxisSpacing
|
double
|
水平子 Widget 之间间距
|
|
mainAxisSpacing
|
double
|
垂直子 Widget 之间间距
|
|
crossAxisCount
|
int
|
一行的 Widget 数量
|
|
childAspectRatio
|
double
|
子 Widget 宽高比例
|
|
children
|
<Widget>[]
|
|
|
gridDelegate
|
SliverGridDelegateWithFix
edCrossAxisCount（常用）
SliverGridDelegateWithMax
CrossAxisExtent
|
控制布局主要用在
GridView.builder 里面
|
GridView.count实现静态网格布局
import 'package:flutter/material.dart';
void main(){
runApp(MaterialApp(
title: "GridView",
home: MyApp(),
));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: GridView.count(
crossAxisCount: 2,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
padding: EdgeInsets.all(5.0),
children: <Widget>[
Container(
color: Colors.pink,
),
Container(
color: Colors.pink,
),
Container(
color: Colors.pink,
),
Container(
color: Colors.pink,
),
Container(
color: Colors.pink,
),
Container(
color: Colors.pink,
),
Container(
color: Colors.pink,
),
Container(
color: Colors.pink,
),
],
),
);
}
}
GridView.builder实现动态网格列表
import 'package:flutter/material.dart';
void main(){
runApp(MaterialApp(
title: "GridView",
home: MyApp(),
));
}
class MyApp extends StatelessWidget {
List list = new List<String>();
MyApp() {
for(var i = 0; i < 9; i++) {
this.list.add("图片$i");
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( // 注意，使用了GridView.builder，又要设置网格属性的话，要用这个属性！
crossAxisCount: 3,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
),
itemCount: this.list.length,
itemBuilder: (context,index) {
return Container(
color: Colors.pink,
child: Center(
child: Text(this.list[index]),
)
);
}
)
);
}
}
最新文章
- JavaWeb---总结(十五)JSP基础语法
- Hessian原理分析
- C++中执行windows指令
- 系统监控、诊断工具之top
- CRT内存调试标记
- iphone关于单倍图和二倍图（导航 背景 变高）
- 二十四、oracle pl/sql 变量
- Python xml 模块
- BOM 浏览器对象模型_window.navigator
- kafka问题集锦
- 小程序 获取微信小程序的源码
- css + div 列表布局
- Building Boost for Android with error “cannot find -lrt”
- [C#/Java] C#中调用Servlet示例
- 【BZOJ】1613: [Usaco2007 Jan]Running贝茜的晨练计划（dp）
- git上传下载代码操作
- BZOJ 2073 [POI2004]PRZ（状压DP）
- Raspberry Pi开发之旅-发送邮件记录时间及IP
- sql server deadlock problem
- Django——快速实现注册
热门文章
- java 注解@interface
- scalaTest的初步使用
- Python3 Selenium自动化web测试 ==>FAQ：Unittest测试报告生成文件名加测试完成时间字符串
- QFramework 使用指南 2020（五）：脚本生成（3）生成 Prefab
- selenium3关于ddt驱动之读取json文件。。。
- 【FFMPEG】【ARM-Linux开发】fmpeg安装第三方编码器（encoder）库，ffmpeg编码h264（完）
- OpenCV3编程入门.知识点
- 使用请求包装器RequestWrapper 对博客内容进行编码
- spring session实现同域下单点登录
- PostgreSQL练习2