Flutter框架跨平台鸿蒙开发——GridView自定义样式
·
GridView自定义样式
知识点概述
GridView自定义样式是提升应用视觉吸引力的重要手段。一个设计精美的GridView不仅能够展示数据,更能给用户留下深刻的第一印象。本章将详细介绍GridView的各种自定义样式实现方式,包括圆角卡片、阴影效果、渐变背景、图片叠加、分割线设计、响应式适配、滚动样式、主题适配等核心样式技术。通过这些样式技巧的应用,可以让GridView变得美观、现代且符合设计规范,提供令人愉悦的视觉体验。
1. 单元格基础样式定制
单元格是GridView中最基本的视觉单元,其样式直接影响整体视觉效果。通过定制单元格的圆角、阴影、边框等属性,可以创造出丰富多样的视觉风格。
1.1 圆角卡片样式实现
圆角是现代UI设计中常见的设计元素,能够让界面看起来更加柔和友好。Flutter中可以通过BorderRadius来设置圆角大小,不同大小的圆角会带来不同的视觉效果。
class RoundedCardGrid extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('圆角卡片网格')),
body: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 12,
crossAxisSpacing: 12,
),
padding: EdgeInsets.all(16),
itemCount: 12,
itemBuilder: (context, index) {
return Card(
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(16),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Colors.primaries[index % Colors.primaries.length],
Colors.primaries[index % Colors.primaries.length].shade700,
],
),
),
child: Center(
child: Text(
'${index + 1}',
style: TextStyle(
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold,
),
),
),
),
),
);
},
),
);
}
}
1.2 圆角样式对比表
| 样式类型 | BorderRadius值 | 视觉效果 | 适用场景 | 设计风格 |
|---|---|---|---|---|
| 小圆角 | BorderRadius.circular(4) | 轻微圆角 | 紧凑型布局 | 商务风格 |
| 中圆角 | BorderRadius.circular(12) | 中等圆角 | 通用场景 | 现代简约 |
| 大圆角 | BorderRadius.circular(20) | 明显圆角 | 卡片展示 | Material Design |
| 胶囊形 | BorderRadius.circular(30) | 近似圆形 | 图标按钮 | iOS风格 |
| 超大圆角 | BorderRadius.circular(40) | 极度圆润 | 特殊按钮 | 创意设计 |
1.3 阴影效果实现
阴影能够为元素增加深度感,让界面层次更加分明。Flutter的Card组件提供了elevation属性来控制阴影强度,同时可以通过BoxShadow实现更精细的阴影控制。
class ShadowCardGrid extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('阴影效果')),
body: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 16,
crossAxisSpacing: 16,
),
padding: EdgeInsets.all(20),
itemCount: 12,
itemBuilder: (context, index) {
return Card(
elevation: 2 + (index % 5) * 2, // 2, 4, 6, 8, 10
shadowColor: Colors.black.withOpacity(0.3),
child: Container(
decoration: BoxDecoration(
color: Colors.primaries[index % Colors.primaries.length],
borderRadius: BorderRadius.circular(12),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'${index + 1}',
style: TextStyle(
color: Colors.white,
fontSize: 28,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 8),
Text(
'Elevation: ${2 + (index % 5) * 2}',
style: TextStyle(color: Colors.white70),
),
],
),
),
),
);
},
),
);
}
}
1.4 阴影强度对比表
| elevation值 | 阴影深度 | 视觉强度 | 适用场景 | 使用建议 |
|---|---|---|---|---|
| 0-2 | 轻微阴影 | 淡淡的层次 | 扁平化设计 | 轻量级应用 |
| 3-5 | 明显阴影 | 清晰的层次 | Material卡片 | 通用场景 |
| 6-8 | 深度阴影 | 强烈的立体感 | 重要内容 | 卡片式设计 |
| 9-12 | 强烈阴影 | 非常明显的浮起 | 强调内容 | 浮层设计 |
| 12+ | 极度阴影 | 可能过度 | 特殊效果 | 谨慎使用 |
1.5 边框样式实现
边框可以为元素增加明确的边界,让内容区域更加清晰。Flutter的BoxDecoration提供了border属性,可以设置边框的颜色、宽度、样式等。
class BorderCardGrid extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('边框样式')),
body: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 12,
crossAxisSpacing: 12,
),
padding: EdgeInsets.all(16),
itemCount: 12,
itemBuilder: (context, index) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: Colors.primaries[index % Colors.primaries.length],
width: 2 + (index % 3), // 2, 3, 4
),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.format_paint,
color: Colors.primaries[index % Colors.primaries.length],
size: 32,
),
SizedBox(height: 8),
Text(
'Border: ${2 + (index % 3)}',
style: TextStyle(fontSize: 12),
),
],
),
),
);
},
),
);
}
}
1.6 边框样式组合
2. 渐变背景样式
渐变是现代UI设计中非常流行的视觉元素,能够为界面增添活力和层次感。Flutter支持多种渐变类型,包括线性渐变、径向渐变、扫描渐变等。
2.1 线性渐变实现
线性渐变是沿着直线方向进行颜色过渡的渐变类型,是最常用的渐变方式之一。
class LinearGradientGrid extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('线性渐变')),
body: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 12,
crossAxisSpacing: 12,
),
padding: EdgeInsets.all(16),
itemCount: 12,
itemBuilder: (context, index) {
final color = Colors.primaries[index % Colors.primaries.length];
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
color,
color.withOpacity(0.8),
color.withOpacity(0.6),
],
),
),
child: Center(
child: Text(
'${index + 1}',
style: TextStyle(
color: Colors.white,
fontSize: 36,
fontWeight: FontWeight.bold,
),
),
),
);
},
),
);
}
}
2.2 渐变类型对比表
| 渐变类型 | 参数复杂度 | 视觉效果 | 适用场景 | 性能影响 |
|---|---|---|---|---|
| LinearGradient | 低 | 简单过渡 | 背景装饰 | 低 |
| RadialGradient | 中 | 圆形扩散 | 按钮图标 | 中 |
| SweepGradient | 高 | 旋转效果 | 特殊装饰 | 较高 |
2.3 径向渐变实现
径向渐变是从中心向外辐射的渐变类型,常用于按钮、图标等圆形元素的装饰。
class RadialGradientGrid extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('径向渐变')),
body: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 12,
crossAxisSpacing: 12,
),
padding: EdgeInsets.all(16),
itemCount: 15,
itemBuilder: (context, index) {
final color = Colors.primaries[index % Colors.primaries.length];
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
gradient: RadialGradient(
center: Alignment.center,
radius: 0.8,
colors: [
color.withOpacity(0.3),
color,
color.shade700,
],
),
),
child: Center(
child: Text(
'${index + 1}',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold,
shadows: [
Shadow(
color: Colors.black.withOpacity(0.5),
blurRadius: 4,
),
],
),
),
),
);
},
),
);
}
}
3. 图片背景与叠加样式
图片是最直观的内容展示方式,能够为GridView带来丰富的视觉效果。同时通过叠加文字、标签等元素,可以增强信息的可读性。
3.1 网络图片网格实现
class NetworkImageGrid extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('网络图片网格')),
body: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 8,
crossAxisSpacing: 8,
),
itemCount: 20,
itemBuilder: (context, index) {
return Card(
clipBehavior: Clip.antiAlias,
child: Stack(
fit: StackFit.expand,
children: [
Image.network(
'https://picsum.photos/400/400?random=$index',
fit: BoxFit.cover,
errorBuilder: (context, error, stackTrace) {
return Container(
color: Colors.grey[300],
child: Center(child: Icon(Icons.error)),
);
},
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) return child;
return Container(
color: Colors.grey[200],
child: Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded /
loadingProgress.expectedTotalBytes!
: null,
),
),
);
},
),
// 图片标签
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Container(
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.transparent,
Colors.black.withOpacity(0.7),
],
),
),
child: Text(
'图片 ${index + 1}',
style: TextStyle(color: Colors.white),
),
),
),
],
),
);
},
),
);
}
}
3.2 叠加文字效果实现
class OverlayTextGrid extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('叠加文字')),
body: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 12,
crossAxisSpacing: 12,
),
padding: EdgeInsets.all(12),
itemCount: 12,
itemBuilder: (context, index) {
final color = Colors.primaries[index % Colors.primaries.length];
return Card(
clipBehavior: Clip.antiAlias,
child: Stack(
fit: StackFit.expand,
children: [
// 背景图片或颜色
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
color.withOpacity(0.6),
color,
],
),
),
child: Icon(
Icons.image,
size: 80,
color: Colors.white.withOpacity(0.3),
),
),
// 底部叠加层
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Container(
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.transparent,
Colors.black.withOpacity(0.8),
],
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
'项目 ${index + 1}',
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 4),
Text(
'这是一个描述性文本',
style: TextStyle(
color: Colors.white70,
fontSize: 12,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
],
),
),
),
// 右上角标签
Positioned(
top: 8,
right: 8,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
),
child: Text(
'NEW',
style: TextStyle(
color: Colors.red,
fontSize: 10,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
);
},
),
);
}
}
3.3 叠加层级架构
4. 分割线设计
分割线可以帮助用户更好地区分不同的内容区域,提升界面的可读性和组织性。
4.1 边框分割线实现
class BorderDividerGrid extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('边框分割线')),
body: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 0,
crossAxisSpacing: 0,
),
itemCount: 15,
itemBuilder: (context, index) {
final color = Colors.primaries[index % Colors.primaries.length];
final isRightEdge = (index + 1) % 3 == 0;
final isBottomEdge = index >= 12;
return Container(
decoration: BoxDecoration(
color: color,
border: Border(
right: BorderSide(
color: Colors.white,
width: isRightEdge ? 0 : 2,
),
bottom: BorderSide(
color: Colors.white,
width: isBottomEdge ? 0 : 2,
),
),
),
child: Center(
child: Text(
'${index + 1}',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
);
},
),
);
}
}
4.2 分割线类型对比表
| 分割类型 | 实现方式 | 视觉效果 | 适用场景 | 代码复杂度 |
|---|---|---|---|---|
| 边框分割 | Border.all | 明显边界 | 严格网格布局 | 中 |
| 间距分割 | mainAxisSpacing | 简洁分离 | 通用场景 | 低 |
| Dividers组件 | Divider widget | 标准分割线 | 列表间隔 | 低 |
| 虚线分割 | BorderSide.dashed | 轻量分隔 | 次级内容 | 中 |
5. 响应式样式设计
响应式设计确保应用在不同设备和屏幕尺寸下都能提供良好的用户体验。
5.1 响应式网格实现
class ResponsiveGrid extends StatelessWidget {
Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width;
final crossAxisCount = screenWidth < 600 ? 2 : screenWidth < 900 ? 3 : 4;
final padding = screenWidth < 600 ? 8.0 : 16.0;
final spacing = screenWidth < 600 ? 8.0 : 12.0;
return Scaffold(
appBar: AppBar(title: Text('响应式网格')),
body: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: crossAxisCount,
mainAxisSpacing: spacing,
crossAxisSpacing: spacing,
),
padding: EdgeInsets.all(padding),
itemCount: 20,
itemBuilder: (context, index) {
return Card(
elevation: 2,
child: Container(
decoration: BoxDecoration(
color: Colors.primaries[index % Colors.primaries.length],
borderRadius: BorderRadius.circular(8),
),
child: Center(
child: Text(
'${index + 1}',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
),
);
},
),
);
}
}
5.2 响应式断点表
| 屏幕宽度 | 设备类型 | 列数 | 间距 | 内边距 | 字体比例 |
|---|---|---|---|---|---|
| < 600px | 手机竖屏 | 2 | 8px | 8px | 1.0 |
| 600-900px | 手机横屏/小平板 | 3 | 10px | 12px | 1.1 |
| 900-1200px | 平板竖屏 | 4 | 12px | 16px | 1.2 |
| > 1200px | 平板横屏/桌面 | 5 | 16px | 20px | 1.3 |
6. 滚动样式自定义
自定义滚动样式可以提升整体的用户体验,让滚动操作更加符合应用的设计风格。
6.1 自定义滚动条实现
class CustomScrollbarGrid extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('自定义滚动条')),
body: Scrollbar(
thumbVisibility: true,
thickness: 10,
radius: Radius.circular(10),
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
),
itemCount: 50,
itemBuilder: (context, index) {
return Container(
decoration: BoxDecoration(
color: Colors.primaries[index % Colors.primaries.length],
borderRadius: BorderRadius.circular(8),
),
child: Center(
child: Text(
'${index + 1}',
style: TextStyle(color: Colors.white),
),
),
);
},
),
),
);
}
}
6.2 平滑滚动实现
class SmoothScrollGrid extends StatelessWidget {
final ScrollController _controller = ScrollController();
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('平滑滚动'),
actions: [
IconButton(
icon: Icon(Icons.arrow_downward),
onPressed: () {
_controller.animateTo(
_controller.position.maxScrollExtent,
duration: Duration(seconds: 1),
curve: Curves.easeInOut,
);
},
),
IconButton(
icon: Icon(Icons.arrow_upward),
onPressed: () {
_controller.animateTo(
0,
duration: Duration(seconds: 1),
curve: Curves.easeInOut,
);
},
),
],
),
body: GridView.builder(
controller: _controller,
physics: BouncingScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
),
itemCount: 50,
itemBuilder: (context, index) {
return Container(
decoration: BoxDecoration(
color: Colors.primaries[index % Colors.primaries.length],
borderRadius: BorderRadius.circular(8),
),
child: Center(
child: Text(
'${index + 1}',
style: TextStyle(color: Colors.white),
),
),
);
},
),
);
}
}
6.3 滚动物理对比表
| Physics类型 | 滚动效果 | 平台 | 适用场景 |
|---|---|---|---|
| ClampingScrollPhysics | 到边停止 | Android | 通用场景 |
| BouncingScrollPhysics | 回弹效果 | iOS | 现代体验 |
| AlwaysScrollableScrollPhysics | 总可滚动 | 跨平台 | 特殊需求 |
| NeverScrollableScrollPhysics | 禁止滚动 | 所有 | 固定内容 |
7. 主题适配方案
主题适配确保应用在明暗主题下都能提供良好的可读性和视觉体验。
7.1 主题适配实现
class ThemedGrid extends StatelessWidget {
Widget build(BuildContext context) {
final theme = Theme.of(context);
final isDark = theme.brightness == Brightness.dark;
return Scaffold(
appBar: AppBar(title: Text('主题适配')),
body: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 12,
crossAxisSpacing: 12,
),
padding: EdgeInsets.all(16),
itemCount: 12,
itemBuilder: (context, index) {
return Card(
elevation: isDark ? 4 : 2,
color: isDark
? theme.cardColor
: Colors.primaries[index % Colors.primaries.length][100],
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.star,
color: isDark
? Colors.amber
: Colors.primaries[index % Colors.primaries.length],
size: 40,
),
SizedBox(height: 8),
Text(
'项目 ${index + 1}',
style: theme.textTheme.titleMedium,
),
],
),
);
},
),
);
}
}
7.2 主题适配检查清单
8. 综合自定义示例
将多种样式技术组合应用,可以创建出视觉效果出色的GridView界面。
class CustomizedGridExample extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('综合自定义'),
backgroundColor: Colors.deepPurple,
),
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.grey[100]!, Colors.grey[300]!],
),
),
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 16,
crossAxisSpacing: 16,
),
padding: EdgeInsets.all(16),
itemCount: 12,
itemBuilder: (context, index) {
final color = Colors.primaries[index % Colors.primaries.length];
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
color.withOpacity(0.8),
color,
],
),
boxShadow: [
BoxShadow(
color: color.withOpacity(0.4),
blurRadius: 15,
offset: Offset(0, 5),
),
],
),
child: Stack(
fit: StackFit.expand,
children: [
// 背景图标
Positioned(
top: 20,
right: 20,
child: Icon(
Icons.widgets,
size: 80,
color: Colors.white.withOpacity(0.2),
),
),
// 内容
Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
padding: EdgeInsets.symmetric(
horizontal: 12,
vertical: 6,
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
),
child: Text(
'Item ${index + 1}',
style: TextStyle(
color: color,
fontWeight: FontWeight.bold,
),
),
),
SizedBox(height: 12),
Text(
'这是一个自定义样式的卡片',
style: TextStyle(
color: Colors.white,
fontSize: 14,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
],
),
),
// 右上角徽章
if (index % 3 == 0)
Positioned(
top: 12,
right: 12,
child: Container(
width: 24,
height: 24,
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
border: Border.all(color: Colors.white, width: 2),
),
child: Center(
child: Text(
'3',
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.bold,
),
),
),
),
),
],
),
);
},
),
),
);
}
}
总结
本章全面介绍了GridView的自定义样式技术:
- ✅ 单元格基础样式 - 圆角、阴影、边框
- ✅ 渐变背景样式 - 线性、径向渐变
- ✅ 图片背景与叠加 - 网络图片、文字叠加
- ✅ 分割线设计 - 边框、间距分割
- ✅ 响应式样式设计 - 断点适配
- ✅ 滚动样式自定义 - 滚动条、平滑滚动
- ✅ 主题适配方案 - 明暗主题
- ✅ 综合自定义示例 - 多样式组合
通过学习本章内容,您已经掌握了GridView样式定制的核心技术。样式定制是提升应用视觉吸引力的关键,良好的视觉设计可以让应用更加专业、现代和令人愉悦。在实际开发中,应该根据设计规范和用户需求选择合适的样式方案,并注意性能和美观的平衡。
关键要点回顾:
- 圆角可以让界面更加柔和友好
- 阴影能够增加视觉层次感
- 渐变为界面增添活力和现代感
- 图片叠加可以增强信息可读性
- 响应式设计确保多设备兼容
- 滚动样式提升整体用户体验
- 主题适配支持个性化设置
- 组合多种样式创造独特效果
下一步建议:
- 在实际项目中应用这些样式技术
- 根据设计稿精确实现视觉效果
- 学习更多高级的动画效果
- 探索Material Design设计规范
掌握这些样式技术后,您的GridView将不再只是简单的数据网格,而是一个令人赞叹的视觉盛宴!
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
14
0- 0
已为社区贡献21条内容
所有评论(0)