颜色渐变 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

基础用法

点击查看源码

TypeScript

<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>