Foreword
this article is based on Api13
drawing cards is very simple. It is the same as usual application development, but not all components support cards. Here, in the official documents, each component also has a clear mark. If supported, there will be a card capability display.
In the last article, we created a card by default. All UI drawings are drawn in WidgetCard under pages in widget. Of course, due to different file names and different file paths, we can view it from the src field in resources->base->profile->form_config.json. This is our card UI view.
The code is also very simple, similar to an ordinary UI page, which is decorated by @ Component decorator and draws components in build.
@Entry
@Component
struct WidgetCard {
/*
* The title.
*/
readonly title: string = 'Hello World';
/*
* The action type.
*/
readonly actionType: string = 'router';
/*
* The ability name.
*/
readonly abilityName: string = 'EntryAbility';
/*
* The message.
*/
readonly message: string = 'add detail';
/*
* The width percentage setting.
*/
readonly fullWidthPercent: string = '100%';
/*
* The height percentage setting.
*/
readonly fullHeightPercent: string = '100%';
build() {
Row() {
Column() {
Text(this.title)
.fontSize($r('app.float.font_size'))
.fontWeight(FontWeight.Medium)
.fontColor($r('sys.color.font_primary'))
}
.width(this.fullWidthPercent)
}
.height(this.fullHeightPercent)
.onClick(() => {
postCardAction(this, {
action: this.actionType,
abilityName: this.abilityName,
params: {
message: this.message
}
});
})
}
}
Drawing is very simple. In addition to basic drawing, this article will also focus on the common requirements in business such as modifying the appearance of cards and implementing multiple cards.
Card Appearance Change
when we created the service card, did we still remember that there was a choice of card appearance specifications, the default is the following.
For example, if 1*2 is selected, then the size of the display is: 1 row and 2 columns of the two-Palace grid; 2*2 means a four-Palace grid with 2 rows and 2 columns. The front is a row and the back is a column. This is relatively simple and there is nothing to say.
In addition to the default creation-time change of the card appearance, we can also change it manually via form_config.json.
For example, I changed it to 1*2, and the effect after running is as follows:
2*4 effect is as follows:
currently, there are 8 supported specifications, as shown in the following figure. You can choose the appropriate one according to your needs.
Multiple Card Settings
hongmeng service card, like other systems, also supports multiple card settings. Setting is also very simple. First, create a UI view of the service card and configure it in form_config.json configuration.
For example, I made a copy of the card:
then, in the forms array in form_config.json, according to the configuration of card 1, one copy is copied as card 2, as follows:
{
"forms": [
{
"name": "widget",
"displayName": "$string:widget_display_name",
"description": "$string:widget_desc",
"src": "./ets/widget/pages/WidgetCard.ets",
"uiSyntax": "arkts",
"window": {
"designWidth": 720,
"autoDesignWidth": true
},
"colorMode": "auto",
"isDynamic": true,
"isDefault": true,
"updateEnabled": false,
"scheduledUpdateTime": "10:30",
"updateDuration": 1,
"defaultDimension": "2*2",
"supportDimensions": [
"2*2"
]
},
{
"name": "widget2",
"displayName": "$string:widget_display_name2",
"description": "$string:widget_desc2",
"src": "./ets/widget/pages/WidgetCard2.ets",
"uiSyntax": "arkts",
"window": {
"designWidth": 720,
"autoDesignWidth": true
},
"colorMode": "auto",
"isDynamic": true,
"isDefault": false,
"updateEnabled": false,
"scheduledUpdateTime": "10:30",
"updateDuration": 1,
"defaultDimension": "2*4",
"supportDimensions": [
"2*4"
]
}
]
}
the above information is only used for testing. In actual development, please give priority to real data. isDefault is the default card. Remember, there can only be one card. The size of each card can be changed. After setting, we will run again and there will be two cards for us to choose from.
Each card can be added on the desktop.
Card UI drawing
there is not much restriction on UI drawing. Any component that supports card capability can be used and drawn at will. The card itself also opens the ability of custom drawing, that is, you can create a Canvas through the Canvas component, and then combine the CanvasRenderingContext2D object to draw custom graphics.
For example, in the above case, I made simple modifications to the two components:
of course, you can also draw through Canvas, such as simply drawing a circle:
defining CanvasRenderingContext2D
private canvasWidth: number = 0;
private canvasHeight: number = 0;
// 初始化CanvasRenderingContext2D和RenderingContextSettings
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
The Canvas component draws a circle and loads it directly into the build function.
Canvas(this.context)
.width('100%')
.height('100%')
.onReady(() => {
// 在onReady回调中获取画布的实际宽和高
this.canvasWidth = this.context.width;
this.canvasHeight = this.context.height;
// 绘制画布的背景
this.context.fillStyle = '#ffffff';
this.context.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
// 在画布的中心绘制一个圆
this.context.beginPath();
let radius = this.context.width / 3;
let circleX = this.context.width / 2;
let circleY = this.context.height / 2;
this.context.moveTo(circleX - radius, circleY);
this.context.arc(circleX, circleY, radius, 2 * Math.PI, 0, true);
this.context.closePath();
this.context.fillStyle = '#000000';
this.context.fill();
})
The effect is as follows:
related Summary
service card drawing is the same as normal UI drawing. You need to pay attention to whether the card logo is supported. One more thing to note is that although multiple service cards can be configured, only 16 cards can be configured at most. According to the official interpretation, if more than 16 cards are configured, the first 16 cards are reserved.
This article label: HarmonyOS/service card
Top comments (0)