颜色渐变 Gradient
数据结构
QTGradient
颜色渐变
参数 | 描述 | 类型 | 必填 |
---|---|---|---|
type | 渐变类型 | QTGradientType | 否 |
shape | 渐变形状 | QTGradientShape | 否 |
orientation | 渐变方向 | QTGradientOrientation | 否 |
colors | 渐变颜色 | Array<string> | 是 |
gradientRadius | 渐变的半径,只有当渐变类型为QT_GRADIENT_TYPE_RADIAL_GRADIENT 时才能使用 | number | 否 |
cornerRadius | 圆角 | number | 否 |
cornerRadii4 | 圆角 (左上, 右上, 右下, 左下) | Array<number> | 否 |
cornerRadii8 | 圆角 | Array<number> | 否 |
QTGradientType
渐变类型
参数 | 描述 | 类型 | 必填 |
---|---|---|---|
QT_GRADIENT_TYPE_LINEAR_GRADIENT | 线性渐变(默认) | QTGradientType | |
QT_GRADIENT_TYPE_RADIAL_GRADIENT | 径向渐变 | QTGradientType | |
QT_GRADIENT_TYPE_SWEEP_GRADIENT | 扫描渐变 | QTGradientType |
QTGradientShape
渐变形状
参数 | 描述 | 类型 | 必填 |
---|---|---|---|
QT_GRADIENT_SHAPE_RECTANGLE | 矩形,可以有圆角(默认) | QTGradientShape | |
QT_GRADIENT_SHAPE_OVAL | 椭圆 | QTGradientShape | |
QT_GRADIENT_SHAPE_LINE | 线性 | QTGradientShape | |
QT_GRADIENT_SHAPE_RING | 圆环 | QTGradientShape |
QTGradientOrientation
渐变方向
参数 | 描述 | 类型 | 必填 |
---|---|---|---|
QT_GRADIENT_ORIENTATION_TOP_BOTTOM | 从上到下 | QTGradientOrientation | |
QT_GRADIENT_ORIENTATION_TR_BL | 从右上角到左下角 | QTGradientOrientation | |
QT_GRADIENT_ORIENTATION_RIGHT_LEFT | 从右到左 | QTGradientOrientation | |
QT_GRADIENT_ORIENTATION_BR_TL | 从右下角到左上角 | QTGradientOrientation | |
QT_GRADIENT_ORIENTATION_BOTTOM_TOP | 从下到上 | QTGradientOrientation | |
QT_GRADIENT_ORIENTATION_BL_TR | 从左下角到右上角 | QTGradientOrientation | |
QT_GRADIENT_ORIENTATION_LEFT_RIGHT | 从左到右 | QTGradientOrientation | |
QT_GRADIENT_ORIENTATION_TL_BR | 从左上角到右下角 | QTGradientOrientation |
基础用法
点击查看源码
vue
<template>
<qt-view
class="qt-view"
:gradientBackground="{
orientation: 0,
colors: ['#1affffff', '#1affffff'],
cornerRadii4: [21, 21, 12, 21],
}"
>
</qt-view>
</template>
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
setup() {
// ...
},
});
</script>