Practical Case of HarmonyOS NEXT Cangjie Development Language: Image Previewer

The previous text shared how to implement a dynamic square using the Cangjie language. There are many pictures in the dynamic square. This article will explain how to implement a picture magnification previewer using the Cangjie language:

Seeing this effect, the first implementation solution that came to my mind was the pop-up window. The pop-up and disappearance effects of the pop-up window saved us a lot of work. Here, the CustomDialogController is used.

First, we implement the pop-up content component. The image preview may have different numbers of images, so we need to do a good job of adaptation and also achieve the page-turning effect. Therefore, using the swiper container is the most suitable. The specific code is as follows. Please pay attention to the definition of the received parameters and the writing method of the pop-up click close code:

package ohos_app_cangjie_entry
import ohos.base.*
import ohos.component.*
import ohos.state_manage.*
import ohos.state_macro_manage.*
import cj_res_entry.app
import std.collection.ArrayList
@CustomDialog
public  class imgdialog {
    var controller: Option<CustomDialogController> = Option.None
    @Prop var imgList:ArrayList<CJResource>
    func build() {
        Swiper(){
            ForEach(imgList, itemGeneratorFunc: {img:CJResource,index:Int64 =>
                        Image(img)
                        .width(100.percent)
                        .height(100.percent)
                        .objectFit(ImageFit.Contain)
                        })
        }
        .width(100.percent)
        .height(100.percent)
        .backgroundColor(Color(0, 0, 0, alpha: 0.6))
        .onClick({e =>
            controller.getOrThrow().close()
                })
    }
}   

In the above code, everyone still needs to pay attention to the writing method of loop rendering Foreach in Cangjie language. It is slightly different from ArkTS, and the main difference is the addition of the itemGeneratorFunc structure. In addition, in the click event of the Swiper component, I wrote controller.getorthrow ().close() to close the pop-up window. The function of the getOrThrow() method, as you can guess from its name, is to retrieve the value or throw an exception. This can avoid many errors during code execution.
The next step is to initialize a pop-up object. By default, the pop-up component cannot fill the entire screen. At this point, it is only necessary to set the customStyle value to true. The function of the autoCancel parameter is to support automatic pop-up messages. The specific code is as follows:

@State var imglist:ArrayList<CJResource> = ArrayList<CJResource>()
var dialogController: CustomDialogController = CustomDialogController(CustomDialogControllerOptions(
    builder: imgdialog(imgList:imglist),
    customStyle:true,
    autoCancel:true
))    

In the configuration parameters of the pop-up window, setting customStyle to true can make the pop-up window display in full screen. Finally, a pop-up window will open when you click on the picture:

imglist = item.getImages()
dialogController.open()

Today's content sharing is over. Thank you all for reading