DEV Community

wei chang
wei chang

Posted on • Edited on

Harmonyos Cangjie Language Development Tutorial: Custom Pop-up Windows

On the first day of the holiday, I wish everyone a happy Dragon Boat Festival. Yesterday, I watched the launch of The Times flagship Zunjie S800 and couldn’t help but marvel at how wonderful this car is
I’m on vacation and have nothing to do, so I’ll continue to share the development tutorial of the Cangjie language with you all. Today, I’ll introduce custom pop-up Windows.
The custom pop-up Windows in Cangjie language are similar to those in ArkTs, but there are still some differences.
In the changjie by CustomDialogController custom pop-up window, using the constructor in popup window CustomDialogControllerOptions popup window to convey all the parameters, to stick a demo code:

var dialogController: CustomDialogController = CustomDialogController(CustomDialogControllerOptions(
  builder: loadingdialog(),
  customStyle:true,
  autoCancel:false
  ))
Enter fullscreen mode Exit fullscreen mode

Then, let's introduce various common attributes and usage methods of custom pop-ups to everyone:
customStyle: It indicates whether the pop-up window style is customized. When set to false, the height of the pop-up window should occupy up to 90% of the screen. When set to true, the pop-up window can fill up the entire screen.
autoCancel: Click on the blank area to see if it disappears automatically
alignment: The alignment method of the pop-up window
offset: The positional offset of the pop-up window
gridCount: The number of bars occupied by the width of the pop-up window; the larger the bar, the wider it is
maskColor: Customize the color of the mask
cornerRadius: Set the fillet radius of the backplane
The above are some commonly used attributes of custom pop-up Windows. You can set them as needed.
The pop-up window after initialization can be opened and closed using the open and close methods:

dialogController.open()
dialogController.close()
Enter fullscreen mode Exit fullscreen mode

In Cangjie, the writing methods of some parameters are also quite different from those in ArkTs, such as the cancel callback method and the setting of colors. It should also be noted that all parameters of the custom pop-up Windows implemented by @CustomDialog do not support dynamic refreshing, which is not very convenient. Currently, Youlan is also looking for a more convenient way to use pop-up Windows.
Here we share with you a complete implementation code for a semi-transparent text prompt pop-up window. Let’s take a look at the effect first:

The following is the implementation code:

var dialogController: CustomDialogController = CustomDialogController(CustomDialogControllerOptions(
  builder: loadingdialog(),
  gridCount:3,
  customStyle:true,
  autoCancel:false,
  maskColor:Color(0, 0, 0, alpha: 0.0),
  cancel:{ => AppLog.info('关闭回调') }
  ))


package ohos_app_cangjie_entry.components
import ohos.base.*
import ohos.component.*
import ohos.state_manage.*
import ohos.state_macro_manage.*
import cj_res_entry.app
@CustomDialog
public  class loadingdialog {
    var controller: Option<CustomDialogController> = Option.None
    func build() {
        Row() {
            Text('这是一个提示')
            .fontColor(Color.WHITE)
            .fontSize(15)
        }.height(200).width(200).alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Center).backgroundColor(0x80000000).borderRadius(10)
    }
}
Enter fullscreen mode Exit fullscreen mode

The above is the content introduction about Cangjie developing language custom pop-up Windows. Thank you for reading. #HarmonyOS Language ## Cangjie ## Shopping #

Top comments (0)