如何实现横向list两端边缘渐隐效果，类似tabs的fadingEdge HarmonyOS 鸿蒙Next

如何实现横向list两端边缘渐隐效果，类似tabs的fadingEdge HarmonyOS 鸿蒙Next

由于设计稿的tabBar右侧有一个图标，所以不能用原生tabs，所以采用了横向list+swiper的模式。

不同的swiper页面背景色不同，无法确定色值，所以也不能用渐变色做边缘渐隐，

还有其他方式可以实现该功能吗。

cke_11386.png


更多关于如何实现横向list两端边缘渐隐效果，类似tabs的fadingEdge HarmonyOS 鸿蒙Next的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

赞一个

更多关于如何实现横向list两端边缘渐隐效果，类似tabs的fadingEdge HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，实现横向List两端边缘渐隐效果可以通过使用ScrollView和LinearLayout结合fadingEdge属性来完成。以下是一个简单的实现步骤：

  1. 在布局文件中使用ScrollView包裹LinearLayout，并将LinearLayout的orientation设置为horizontal。
  2. 在ScrollView中设置fadingEdgeLength属性，控制渐隐区域的大小。
  3. 在ScrollView中设置fadingEdge属性为horizontal，启用水平方向的渐隐效果。

示例代码如下：

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fadingEdgeLength="50dp"
    android:fadingEdge="horizontal">
    
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        
        <!-- 添加你的子视图 -->
        
    </LinearLayout>
</ScrollView>
回到顶部