HarmonyOS鸿蒙Next中卡片式布局 MaterialCardView

HarmonyOS鸿蒙Next中卡片式布局 MaterialCardView

卡片式布局 MaterialCardView**

​ MaterialCardView也是类似于FrameLayout，加上了阴影和圆角，由于FrameLayout没用什么定位方法，所以在卡片式布局里再嵌套一个线性布局

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_margin="5dp"
    app:cardCornerRadius="4dp">//设置圆角弧度，也可以设置高度，和FloatingActionbutton类似

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/fruitImage"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:scaleType="centerCrop"//指定了图片的缩放模式，为了让图片填充满整个ImageView，把图片按照原比例放大，超出的部分截掉
            />

        <TextView
            android:id="@+id/fruitName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="5dp" />

    </LinearLayout>


</com.google.android.material.card.MaterialCardView>

        initFruit()
        val layoutManager=GridLayoutManager(this,2)//正常是val layoutManager= LinearLayoutManager(this)
//这里用GridLayoutManager（），第二个参数表示一行显示两列数据
        binding.recyclerView.layoutManager=layoutManager
        val adapter=FruitAdapter(this,fruitList)
        binding.recyclerView.adapter=adapter

在FruitAdapter中

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    val fruit=fruitList[position]
    holder.fruitName.text=fruit.name
    Glide.with(context).load(fruit.imageId).into(holder.fruitImage)
    //这里用Glide而不是传统的加载图片的方式，使因为Glide可以实现压缩图片等功能，防止了内存溢出
}

但是这里Toolbar会被挡住，因为coordinateLayout是加强版的FrameLayout，也就是说控件会默认摆放在布局的左上角，造成遮挡，要用AppbarLayout解决


更多关于HarmonyOS鸿蒙Next中卡片式布局 MaterialCardView的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS Next中，MaterialCardView 是一种卡片式布局组件，用于创建具有阴影、圆角和可点击效果的卡片界面。它基于鸿蒙的ArkUI框架开发，支持声明式UI语法。开发者可以通过设置属性如elevation（阴影）、borderRadius（圆角）和clickable（可点击）来定制卡片外观与交互。MaterialCardView 通常用于展示信息块，如列表项或内容容器，提升视觉层次感。

更多关于HarmonyOS鸿蒙Next中卡片式布局 MaterialCardView的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，没有直接名为 MaterialCardView 的组件，因为这是Android Material Design库中的组件。HarmonyOS提供了自己的一套UI组件来实现类似的卡片式布局效果。

你可以使用 CommonPanel 组件来实现卡片效果。CommonPanel 是一个容器组件，自带圆角和阴影，非常适合用于构建卡片式布局。

以下是一个在ArkTS/ArkUI中的等效实现示例：

@Entry
@Component
struct CardExample {
  build() {
    Column() {
      // 使用 CommonPanel 作为卡片容器
      CommonPanel({
        type: CommonPanelType.NORMAL,
        style: PanelStyle.SHADOW // 设置阴影样式
      }) {
        Column() { // 内部使用Column进行垂直布局，类似于LinearLayout(vertical)
          // 图片部分
          Image($r('app.media.fruitImage')) // 使用资源引用
            .width('100%')
            .height(100)
            .objectFit(ImageFit.Cover) // 类似于Android的centerCrop

          // 文字部分
          Text('水果名称')
            .width('100%')
            .textAlign(TextAlign.Center)
            .margin(5)
        }
        .width('100%')
      }
      .width('100%')
      .margin(5)
      .borderRadius(4) // 设置圆角
    }
    .width('100%')
    .padding(12)
  }
}

关键点说明：

  1. CommonPanel：这是HarmonyOS中实现卡片效果的主要组件，通过 PanelStyle.SHADOW 可以添加阴影效果。

  2. 布局嵌套：在 CommonPanel 内部使用 Column 或 Row 进行子元素的排列，这与你在Android中嵌套 LinearLayout 的思路一致。

  3. 样式设置：

    • 使用 .borderRadius() 设置圆角
    • 使用 .margin() 设置外边距
    • ImageFit.Cover 对应Android的 centerCrop 缩放模式

  4. 在列表中使用：如果你要在 List 或 Grid 中使用这种卡片布局，只需将上述 CommonPanel 结构作为列表项的内容即可。

HarmonyOS Next的ArkUI声明式语法更加简洁，通过链式调用设置样式属性，避免了XML的繁琐。这种设计模式在实现相同视觉效果的同时，代码更加清晰易读。

回到顶部