PerryTs初探(二): 布局与样式

2026-05-29

先看界面:

image

 代码:

1. 结构: 先组装组件, 再设置样式

 1 //入口文件
 2 import { 
 3     App, VStack, HStack, 
 4     Text, Button, TextArea, State,
 5     alert, openFileDialog
 6 
 7 } from "perry/ui"
 8 
 9 //导入自己写的样式类
10 import {UISetting} from "./utils/zbperryui"
11 
12 let file_path = State("")
13 let textarea_content = State("运行日志:")
14 
15 const chose_file = function(){
16     openFileDialog((path: string) => {
17         if (path.length > 0) {
18             file_path.set(path)
19         } else {
20             alert("未选择")
21         }
22     })
23 }
24 
25 //单个组件
26 let label = Text("数据文件: ")
27 let btn = Button(" 选择 ", chose_file)
28 let comment = Text(`${file_path.value}`)
29 let textarea = TextArea(`${textarea_content.value}`)
30 
31 //组装组件, 布局
32 let row1 = HStack(8, [label,  btn, comment])
33 let container = VStack([8, row1, textarea])
34 
35 
36 //修改组件样式(代码跟组件分开)
37 new UISetting(label).setText(20)
38 new UISetting(btn).setButton().setRadius(18)
39 new UISetting(comment).setText(20)
40 new UISetting(row1).setPadding()
41 new UISetting(textarea).setPadding()
42 
43 //开始渲染
44 App({
45     title: "测试",
46     width: 800,
47     height: 400,
48     body: container,
49 })

2. 自己封装的样式类

  1 import {
  2     textSetColor, textSetFontSize, textSetFontFamily, textSetFontWeight,
  3     setCornerRadius, setPadding,
  4     widgetSetBackgroundColor, widgetSetBackgroundGradient,
  5     widgetSetBorderColor, widgetSetBorderWidth,
  6     widgetSetEdgeInsets,
  7     widgetSetWidth, widgetSetHeight, widgetMatchParentWidth,
  8     widgetSetOpacity,
  9     widgetSetControlSize,
 10     widgetSetTooltip,
 11     widgetSetEnabled,
 12     stackSetAlignment
 13 } from "perry/ui"
 14 
 15 export class UISetting{
 16     wt:any
 17     constructor(wt:any){
 18         this.wt = wt
 19     }
 20 
 21     //背景色
 22     setBackgroundHex(hex:string):this {
 23         widgetSetBackgroundColor(this.wt, hex)
 24         return this
 25     }
 26 
 27     //背景色
 28     setBackgroundRgba(r:number=0.94, g:number=0.94, b:number=0.94, a:number=1.0):this {
 29         widgetSetBackgroundColor(this.wt, r,g,b,a)
 30         return this
 31     }
 32 
 33     //宽高
 34     setWidthHeight(width:number=0, height:number=0):this{
 35         width>0 && widgetSetWidth(this.wt, width)
 36         height>0 && widgetSetHeight(this.wt, height)
 37         return this
 38     }
 39 
 40     //内边距
 41     setPadding(pt:number=5, pr:number=5, pb:number=5, pl:number=5):this{
 42         setPadding(this.wt, pt, pr, pb, pl) //上右下左
 43         return this
 44     }
 45 
 46     //内边距
 47     setInset(pt:number=5, pr:number=5, pb:number=5, pl:number=5):this{
 48         widgetSetEdgeInsets(this.wt, pt, pr, pb, pl)//上右下左
 49         return this
 50     }
 51 
 52     //边框
 53     setBorderHex(width:number=1,hex:string="grey"):this{
 54         widgetSetBorderWidth(this.wt, width)
 55         widgetSetBorderColor(this.wt, hex)
 56         return this
 57     }
 58 
 59     //边框
 60     setBorderRgba(width:number=1, r:number=0.8, g:number=0.8, b:number=0.8, a:number=1.0):this{
 61         widgetSetBorderWidth(this.wt, width)
 62         widgetSetBorderColor(this.wt, r, g, b, a)
 63         return this
 64     }
 65 
 66     //圆角
 67     setRadius(r:number=5):this{
 68         r>0 && setCornerRadius(this.wt, r)
 69         return this
 70     }
 71 
 72     //文字样式
 73     setText(font_size:number=16, font_weight:number=100, font_name:string="宋体", color:string="#1e1e1e"):this{
 74         textSetFontFamily(this.wt, font_name)
 75         textSetFontSize(this.wt, font_size)
 76         textSetFontWeight(this.wt, font_weight)
 77         textSetColor(this.wt, color)
 78         return this
 79     }
 80 
 81     //按钮样式
 82     setButton(size:number=1, conrner_radius=5):this{
 83         this.setText().setBorderRgba(1)
 84         setCornerRadius(conrner_radius) 
 85         widgetSetControlSize(size) // 0=mini, 1=small, 2=regular, 3=large
 86         return this
 87     }
 88 
 89     //是否可用
 90     setEnable(enabled:boolean):this{
 91         let flag = enabled ? 1: 0
 92         widgetSetEnabled(this.wt, flag) // 0 = disabled, 1 = enabled
 93         return this
 94     }
 95 
 96     //提示信息
 97     setTooltip(text:string=""):this{
 98         widgetSetTooltip(this.wt, text)
 99         return this
100     }
101 
102     //对齐方式 (H: 3:Top,4:Bottom,12:CenterY  V: 5:left,7:stretch to fill the Width,9:CenterX)
103     setStackAlignment(flag:string):this{
104         let align = new Map<string, number>()
105 
106         //水平方向
107         align.set('top', 3)
108         align.set('bottom', 4)
109         align.set('centerY', 12)
110 
111         //垂直方向
112         align.set('left', 5)
113         align.set('streach', 7)
114         align.set('centerX', 9)
115         
116         if (align.has(flag)){
117             stackSetAlignment(this.wt, align.get(flag))
118         }
119         
120         return this
121     }
122 
123 
124 }
View Code

 

3.目前遇到的问题

3.1 按钮设置圆角不起作用

3.2 调用子组件对齐的方法, 文字和按钮不能居中对齐

 

posted @ 2026-05-29 13:25  myD  阅读(17)  评论(0)    收藏  举报