求一个鸿蒙开发中indicator自定义代码？

发布于
2024-12-10 上海

求一个鸿蒙开发中indicator自定义代码？

本文参与了【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

阅读 552

AI BotBETA

在鸿蒙（HarmonyOS）开发中，自定义一个indicator（指示器）通常涉及自定义组件的绘制和逻辑处理。以下是一个简单的示例，展示了如何自定义一个圆形进度条类型的indicator。

### 自定义Indicator组件

1. **创建自定义组件**

   首先，在你的项目中创建一个新的自定义组件，比如`MyIndicator`。

2. **编写自定义组件的代码**

   在`MyIndicator`的代码中，你需要处理绘制逻辑和进度更新逻辑。

// MyIndicator.java
package com.example.myindicator;

import ohos.aafwk.ability.AbilitySlice;
import ohos.agp.components.Component;
import ohos.agp.components.Canvas;
import ohos.agp.components.Paint;
import ohos.agp.components.RectFloat;
import ohos.multimodalinput.event.TouchEvent;

public class MyIndicator extends Component {

   private Paint paint;
   private float progress = 0;

   public MyIndicator(AbilitySlice context) {
       super(context);
       init();
   }

   private void init() {
       paint = new Paint();
       paint.setAntiAlias(true);
       paint.setStyle(Paint.Style.STROKE);
       paint.setStrokeWidth(20);
   }

   public void setProgress(float progress) {
       if (progress < 0) {
           progress = 0;
       } else if (progress > 1) {
           progress = 1;
       }
       this.progress = progress;
       invalidate(); // Request a redraw
   }

   @Override
   protected void onDraw(Canvas canvas, RectFloat dirtyRegion) {
       super.onDraw(canvas, dirtyRegion);

       float width = getWidth();
       float height = getHeight();
       float minDim = Math.min(width, height);
       float radius = minDim / 2 - 10; // Subtract some padding

       float sweepAngle = progress * 360;

       paint.setColor(0xFF0000FF); // Blue color for background circle
       canvas.drawCircle(width / 2, height / 2, radius, paint);

       paint.setColor(0xFFFF0000); // Red color for progress circle
       canvas.drawArc(width / 2 - radius, height / 2 - radius, width / 2 + radius, height / 2 + radius, -90, sweepAngle, true, paint);
   }

   @Override
   public boolean onTouchEvent(TouchEvent event) {
       // Handle touch events if needed, e.g., to drag the progress
       return super.onTouchEvent(event);
   }

}


3. **使用自定义组件**

在你的页面或组件中，添加并使用`MyIndicator`。

// MainAbilitySlice.java
package com.example.myapp;

import ohos.aafwk.ability.AbilitySlice;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.Text;
import ohos.bundle.IBundleManager;

public class MainAbilitySlice extends AbilitySlice {

   private MyIndicator myIndicator;
   private Text progressText;

   @Override
   protected void onStart(IBundleManager iBundleManager) {
       super.onStart(iBundleManager);
       setUIContent(ResourceTable.Layout_ability_main);

       DirectionalLayout layout = (DirectionalLayout) findComponentById(ResourceTable.Id_layout);

       myIndicator = new MyIndicator(this);
       layout.addComponent(myIndicator);

       progressText = (Text) findComponentById(ResourceTable.Id_progress_text);

       // Update progress and text every second for demonstration
       new Thread(() -> {
           while (true) {
               try {
                   Thread.sleep(1000);
                   float newProgress = (float) (System.currentTimeMillis() % 10000) / 10000;
                   myIndicator.setProgress(newProgress);
                   progressText.setText("Progress: " + (int) (newProgress * 100) + "%");
               } catch (InterruptedException e) {
                   e.printStackTrace();
               }
           }
       }).start();
   }

}


4. **布局文件**

确保你的布局文件中有一个用于显示`progressText`的`Text`组件（或其他需要的组件）。

<DirectionalLayout

   xmlns:ohos="http://schemas.huawei.com/res/ohos"
   ohos:width="match_parent"
   ohos:height="match_parent"
   ohos:orientation="vertical"
   ohos:alignment="center">

   <Text
       ohos:id="$+id:progress_text"
       ohos:width="wrap_content"
       ohos:height="wrap_content"
       ohos:text="Progress: 0%"
       ohos:text_size="20vp" />

   <!-- MyIndicator will be added programmatically -->

</DirectionalLayout>


这个示例展示了如何创建一个简单的圆形进度条indicator。你可以根据需要进一步自定义和扩展这个组件，比如添加动画效果、处理触摸事件来手动调整进度等。

1 个回答

发布于
2024-12-10 上海

✓ 已被采纳

具体示例代码如下所示：


@Entry 
@Component 
export struct SwiperComponent { 
  private swiperController: SwiperController = new SwiperController() 
  @State currentIndex: number = 0; 
  @State swiperData: string[] = [''，''，'']; 
 
  build() { 
    Column() { 
      Swiper(this.swiperController) { 
        Text('0') 
          .width('90%') 
          .height('50%') 
          .backgroundColor(Color.Gray) 
          .textAlign(TextAlign.Center) 
          .fontSize(30) 
 
        Text('1') 
          .width('90%') 
          .height('50%') 
          .backgroundColor(Color.Green) 
          .textAlign(TextAlign.Center) 
          .fontSize(30) 
 
        Text('2') 
          .width('90%') 
          .height('50%') 
          .backgroundColor(Color.Pink) 
          .textAlign(TextAlign.Center) 
          .fontSize(30) 
      } 
      .indicator(false) 
      .autoPlay(true) 
      .onChange(index => { 
        this.currentIndex = index; 
      }) 
 
      Row({ space: 10 }) { 
        ForEach(this.swiperData， (item: string， index: number) => { 
          Shape() { 
            Rect().width(50).height(10).radius(5).fill(index !== this.currentIndex ? Color.Black : Color.Red) 
              .fillOpacity(0.6) 
          } 
        }) 
      } 
      .margin({ top: 12 }) 
    } 
    .width('100%') 
  } 
}

本文参与了【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

HarmonyOS

子站问答

相似问题

找不到问题？创建新问题