纯go语言ui框架之高级组件:第84个组件之rich_text富文本组件
2026/6/30 6:32:36 网站建设 项目流程

纯go语言实现flutter风格桌面GUI框架:ui

1、支持windows 、linux、unix、masOS、ios、android等操作系统
2、代码风格和flutter基本差不多,如果会flutter和go语言无缝切换上手,如果熟悉go语言很快上手。
3、框架有上100个组件,足以支持绝大部复杂应用
4、支持
1)手动刷新ui
2)定时更新ui
3)指定时间范围实时刷新ui
4)手动开启实时刷新ui和手动关闭实时刷新ui
5)全局实时刷新
————————————————

1、纯go语言ui框架第84个组件:rich_text组件

这个是富文本组件
完整代码

// RichText 组件验证示例packagemainimport("image""log""render/layout""render/widget/material""ui")typeRichTextDemostruct{app*ui.App}funcNewRichTextDemo()*RichTextDemo{return&RichTextDemo{app:ui.NewApp("RichText 富文本组件示例",800,900),}}func(d*RichTextDemo)Layout(gtx layout.Context,th*material.Theme)layout.Dimensions{ui.FillRect(gtx,image.Rect(0,0,gtx.Constraints.Max.X,gtx.Constraints.Max.Y),ui.ColorBackground.NRGBA())returnui.Container{Background:ui.ColorSurface,Radius:12,Padding:ui.AllEdges(24),Child:ui.Column{Spacing:24,Children:[]ui.Widget{ui.NewTitleLabel("RichText 富文本组件示例"),// 1. 颜色混合ui.NewLabel("① 同一行混合不同颜色").SetFontSize(14).SetBold(),ui.NewRichText().AddText("这是").AddColored("红色",ui.ColorRed).AddText("、").AddColored("绿色",ui.ColorGreen).AddText("、").AddColored("蓝色",ui.ColorBlue).AddText("、").AddColored("橙色",ui.ColorOrange).AddText("的混合颜色示例。").SetFontSize(16).SetID("rt_color"),// 2. 粗体 + 普通ui.NewLabel("② 粗体与普通文本混合").SetFontSize(14).SetBold(),ui.NewRichText().AddText("普通文本,").AddBold("这是粗体,").AddText("再次普通,").AddBold("再来一段粗体。").SetFontSize(16).SetID("rt_bold"),// 3. 斜体ui.NewLabel("③ 斜体文本").SetFontSize(14).SetBold(),ui.NewRichText().AddText("正常字体,").AddItalic("这是斜体,").AddText("回到正常。").SetFontSize(16).SetID("rt_italic"),// 4. 不同字号ui.NewLabel("④ 混合不同字号").SetFontSize(14).SetBold(),ui.NewRichText().AddText("小字").AddSize("中等字号",18).AddText("回到小字").AddSize("大字号",24).AddText("结束。").SetFontSize(14).SetID("rt_size"),// 5. 高亮背景(标记色)ui.NewLabel("⑤ 文本背景高亮").SetFontSize(14).SetBold(),ui.NewRichText().AddText("这是一段").AddBg("带黄色背景的文本",ui.Color{R:0xFF,G:0xEB,B:0x3B,A:0xFF}).AddText(",与普通文本混合。").SetFontSize(16).SetID("rt_bg"),// 6. 综合效果:粗体+颜色+背景ui.NewLabel("⑥ 综合效果(粗体+颜色+背景)").SetFontSize(14).SetBold(),ui.NewRichText().AddText("用户 ").AddBoldColored("张三",ui.Color{R:0x29,G:0x24,B:0xB2,A:0xFF}).AddText(" 在 ").AddBg("2026-06-29",ui.Color{R:0xE3,G:0xF2,B:0xFD,A:0xFF}).AddText(" 提交了 ").AddBoldColored("3 个变更",ui.ColorError).AddText("。").SetFontSize(16).SetID("rt_complex"),// 7. 长文本换行 + 行内混合样式ui.NewLabel("⑦ 长文本自动换行 + 行内混合样式").SetFontSize(14).SetBold(),ui.NewRichText().AddText("这是一段较长的富文本内容,用于验证").AddBold("自动换行").AddText("功能。当文本超过容器宽度时,应当正常换到下一行,而").AddColored("行内的颜色",ui.Color{R:0xC2,G:0x18,B:0x5B,A:0xFF}).AddText("与").AddBold("粗体").AddText("等样式应保持正确。RichText 组件通过游标 (cursorX, cursorY) 串接不同 run,每个 run 独立 shaping,并使用 transform offset 定位 glyph。").SetFontSize(14).SetID("rt_wrap"),// 8. 多行(带 \n)—— 暂时通过多个 RichText 模拟段落ui.NewLabel("⑧ 多段文本(使用多个 RichText 串接)").SetFontSize(14).SetBold(),ui.NewRichText().AddText("第一段:RichText 是").AddBold("富文本").AddText("组件,支持在同一段落中混合不同样式。").SetFontSize(14).SetID("rt_p1"),ui.NewRichText().AddText("第二段:通过 ").AddBoldColored("AddRun",ui.Color{R:0x29,G:0x24,B:0xB2,A:0xFF}).AddText("、").AddBoldColored("AddBold",ui.Color{R:0x29,G:0x24,B:0xB2,A:0xFF}).AddText(" 等方法链式构建富文本内容。").SetFontSize(14).SetID("rt_p2"),},},}.Layout(gtx,th)}funcmain(){log.Println("[rich-text-demo] starting...")demo:=NewRichTextDemo()demo.app.SetRoot(demo)log.Println("[rich-text-demo] root set, calling Run()")demo.app.Run()log.Println("[rich-text-demo] exited")}

效果:

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询