基础的 GridView 布局

在这里插入图片描述

参数 说明
gridDelegate 对子元素进行修饰，由于SliverGridDelegate 是一个抽象类， 找它的实现类有 【SliverGridDelegateWithFixedCrossAxisCount，SliverGridDelegateWithMaxCrossAxisExtent,】
childAspectRatio 子元素列表
SliverGridDelegateWithFixedCrossAxisCount方法 说明
crossAxisCount 设置一行几列
childAspectRatio 设置每子元素的大小（宽高比）
crossAxisSpacing 元素的左右的 距离
mainAxisSpacing 子元素上下的 距离 
class GridWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: GridView(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          // 一行几列
          crossAxisCount: 4,
          // 设置每子元素的大小（宽高比）
          childAspectRatio: 1.8,
          // 元素的左右的 距离
          crossAxisSpacing: 20,
          // 子元素上下的 距离
          mainAxisSpacing: 10,
        ),
        children: [
          Container(
            color: Colors.red,
            child: Icon(Icons.keyboard),
          ),
          Container(
            color: Colors.pink,
            child: Icon(Icons.add),
          ),
          Container(
            color: Colors.green,
            child: Icon(Icons.home),
          ),
          Container(
            color: Colors.blue,
            child: Icon(Icons.add),
          ),
          Container(
            color: Colors.orange,
            child: Icon(Icons.home),
          ),
        ],
      ),
    );
  }
}

在这里插入图片描述

SliverGridDelegateWithMaxCrossAxisExtent方法 说明
maxCrossAxisExtent 每个子元素水平方向上的宽度
childAspectRatio 设置每子元素的大小（宽高比）
crossAxisSpacing 元素的左右的 距离
mainAxisSpacing 子元素上下的 距离 
class GridWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: GridView(
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
          // 每个子元素水平方向上的宽度
          maxCrossAxisExtent: 120,
          // 设置每子元素的大小（宽高比）
          childAspectRatio: 1.8,
          // 元素的左右的 距离
          crossAxisSpacing: 20,
          // 子元素上下的 距离
          mainAxisSpacing: 10,
        ),
        children: [
          Container(
            color: Colors.red,
            child: Icon(Icons.keyboard),
          ),
          Container(
            color: Colors.pink,
            child: Icon(Icons.add),
          ),
          Container(
            color: Colors.green,
            child: Icon(Icons.home),
          ),
          Container(
            color: Colors.blue,
            child: Icon(Icons.add),
          ),
          Container(
            color: Colors.orange,
            child: Icon(Icons.home),
          ),
        ],
      ),
    );
  }
}
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

React Native鸿蒙版：自定义useDebounce Hook

本文深入解析在React Native for OpenHarmony环境中实现自定义 Hook的完整方案。作为React Native开发者，你是否曾因OpenHarmony平台下频繁触发的搜索请求导致性能卡顿？🔥 本文将从防抖原理出发，结合OpenHarmony 3.2 SDK特性，提供可直接运行的TypeScript实现，并详解内存泄漏处理、平台差异适配等关键问题。通过真实设备测试数据（搭

avatar 开源鸿蒙跨平台开发者社区

用React Native开发OpenHarmony应用：Slider进度条拖动回调

本文深度解析React Native Slider组件在OpenHarmony平台上的实战应用，聚焦拖动回调机制的技术细节与适配要点。作为拥有5年React Native开发经验的工程师，我将在OpenHarmony 3.2 SDK真机环境（API Level 9）中实测Slider组件，详细剖析onValueChange与onSlidingComplete事件的触发逻辑、性能差异及优化策略。

avatar 开源鸿蒙跨平台开发者社区

OpenHarmony + RN：Switch开关状态绑定

Switch组件是React Native提供的用于二元选择（开/关）的基础UI组件，其核心功能是提供用户友好的开关交互体验。OpenHarmony → Toggle组件💡关键原理：RN通过"桥接(Bridge)"机制将JS层的Switch组件调用转换为对应平台的原生组件调用。在OpenHarmony环境中，这一过程需要经过RN for OpenHarmony社区适配层的特殊处理。value：控

avatar 开源鸿蒙跨平台开发者社区