aardio 范例: plus 控件 - 渐变与圆角

import win.ui;
/*DSG{{*/
var winform = win.form(text="plus 控件 - 渐变与圆角";right=759;bottom=469;bgcolor=0xFFFFFF)
winform.add(
btnBlue={cls="plus";text="深邃科技蓝";left=379;top=96;right=694;bottom=156;bgcolor=0xDF734E;border={radius=6};font=LOGFONT(h=-16);forecolor=0xBE4A22;linearGradient=90;notify=1;z=1};
btnGray={cls="plus";text="极简高级灰";left=379;top=276;right=694;bottom=336;bgcolor=0xFBFAF9;border={color=0xDBD5D1;radius=8;width=1};font=LOGFONT(h=-16);forecolor=0xDBD5D1;linearGradient=90;notify=1;z=3};
btnPurple={cls="plus";text="活力极光紫";left=379;top=186;right=694;bottom=246;bgcolor=0xF16663;border={radius=30};font=LOGFONT(h=-16);forecolor=0xF755A8;linearGradient=45;notify=1;z=2};
radialGradient={cls="plus";left=65;top=161;right=296;bottom=368;bgcolor=0x00FFFF;forecolor=0xFFFFFF;linearGradient=-1;notify=1;z=4}
)
/*}}*/

/*
在 plus 控件开启 linearGradient 时，
background 代表渐变的起始色，foreground 代表渐变的结束色。
*/

// 方案一：深邃科技蓝（专业、稳重）
// 特点：垂直线性渐变，模拟经典的 SaaS 软件主按钮，具有较强的视觉引导性
winform.btnBlue.skin({
    linearGradient = 90; // 90 度是常见的从上到下的垂直渐变，看起来最自然。
    background = { 
        default = 0xFF4E73DF; // 起始：中蓝
        hover = 0xFF6E8DF0;   // 悬停：亮蓝
        active = 0xFF224ABE;  // 点击：深蓝
        disabled = 0xFFD1D3E2;
    };
    foreground = { 
        default = 0xFF224ABE; // 结束：深蓝
        hover = 0xFF4E73DF;   
        active = 0xFF1A3B96;  
        disabled = 0xFFB7B9CC;
    };
    color = { 
        default = 0xFFFFFFFF; // 白色文字
        disabled = 0xFF858796       
    };
    radius = 6; //6-8 像素是目前最通用的 UI 圆角，显得严谨。
})

// 方案二：活力极光紫（现代、时尚）
// 特点：45度对角线渐变，色相从靛蓝跨越到紫色，充满动感，适合互联网产品
winform.btnPurple.skin({
    linearGradient = 45; //45 度是斜向渐变，常用于色彩鲜艳的现代风格按钮。
    background = { 
        default = 0xFF6366F1; // 起始：靛青
        hover = 0xFF818CF8;
        active = 0xFF4F46E5;
        disabled = 0xFFE5E7EB;
    };
    foreground = { 
        default = 0xFFA855F7; // 结束：活力紫
        hover = 0xFFC084FC;
        active = 0xFF9333EA;
        disabled = 0xFFD1D5DB;
    };
    color = { 
        default = 0xFFFFFFFF;
        disabled = 0xFF9CA3AF       
    };
    radius = 30; // 胶囊型大圆角，超过 20 像素或等于高度一半时，呈现“胶囊”状，显得更加活泼、友好。
})

// 方案三：极简高级灰（低调、内敛）
// 特点：微弱的明度变化模拟类金属质感，配以深色文字，适合作为次要按钮或背景
winform.btnGray.skin({
    linearGradient = 90;
    background = { 
        default = 0xFFF9FAFB; // 起始：极浅灰
        hover = 0xFFF3F4F6;
        active = 0xFFE5E7EB;
        disabled = 0xFFF3F4F6;
    };
    foreground = { 
        default = 0xFFD1D5DB; // 结束：浅灰
        hover = 0xFF9CA3AF;
        active = 0xFF6B7280;
        disabled = 0xFFE5E7EB;
    };
    color = { 
        default = 0xFF374151; // 深灰色文字
        disabled = 0xFF9CA3AF       
    };
    border = {
        default = {color = 0xFFD1D5DB,width = 1,radius = 8};
        hover = {color =0xFF9CA3AF,width = 1,radius = 8};
    };
})

/*
//plus 控件兼容以下配置渐变色的写法（一般不推荐这种写法，除非需要动态改变渐变角度 ）
winform.btnGray.skin({
    background = {
        default = {
            color1 = 0xFFF9FAFB;  // 主色
            color2 = 0xFFD1D5DB;  // 渐变色，交互状态切换时设为控件的 foreground 属性值 
            angle = 90 //渐变角度，交互状态切换时设为控件的 linearGradient 属性值 
        };
        hover = {
            color1 = 0xFFF3F4F6;
            color2 = 0xFF9CA3AF;
            angle = 90
        };
        active = {
            color1 = 0xFFE5E7EB;
            color2 = 0xFF6B7280;
            angle = 90
        };
    };
})

*/

/*
指定为负数启用圆形径向渐变,
此时 background 为中心颜色，foreground 为环绕颜色
*/
winform.radialGradient.linearGradient = -1;
winform.radialGradient.background = 0xFFFFFF00;//中心颜色
winform.radialGradient.foreground = 0x00000000;//环绕颜色（透明）

winform.show();
win.loopMessage();