@Entry
@Component
struct workA {// 定義6種顏色數組，使用ResourceColor類型確保顏色值合法性@State color: ResourceColor[] = ['#ef2816', '#f0a200', '#6ab002', '#005868', '#41192e', '#141411']// 定義公共樣式裝飾器，避免重復樣式代碼@Stylesys() {// 白色圓形基礎樣式（寬高20，圓角10，白色背景）.width(20).height(20).borderRadius(10).backgroundColor('#fff')}build() {Column() {/* 第一行：3個Flex容器（1-3號元素） */Row() {ForEach([1, 2, 3], (item: number) => {Flex({// 布局規則：// 第一個元素居中排列（橫向），其余元素兩端分布（縱向）justifyContent: item == 1 ? FlexAlign.Center : FlexAlign.SpaceBetween,alignItems: item == 1 ? ItemAlign.Center : ItemAlign.Auto,direction: item == 1 ? FlexDirection.Row : FlexDirection.Column}) {// 根據item值動態生成子元素if (item == 1) {// 情況1：單個居中圓圈Text().ys()} else if (item == 2) {// 情況2：兩個圓圈（右端對齊 + 默認位置）Text().ys().alignSelf(ItemAlign.End)Text().ys()} else {// 情況3：三個圓圈（右端對齊 + 居中 + 默認位置）Text().ys().alignSelf(ItemAlign.End)Text().ys().alignSelf(ItemAlign.Center)Text().ys() // 注意：這里保持與上方樣式一致}}// 容器基礎樣式.width(100).height(100).borderRadius(10).padding(10)// 根據索引取顏色（item-1對應數組下標）.backgroundColor(this.color[item - 1])})}/* 第二行：3個Flex容器（4-6號元素） */Row() {ForEach([4, 5, 6], (item: number) => {Flex({// 統一使用兩端對齊布局justifyContent: FlexAlign.SpaceBetween}) {if (item == 4) {// 情況4：兩列，每列兩個上下分布的圓圈Column() {Text().ys()Text().ys()}.height('100%').justifyContent(FlexAlign.SpaceBetween)Column() {Text().ys()Text().ys()}.height('100%').justifyContent(FlexAlign.SpaceBetween)} else if (item == 5) {// 情況5：三列（兩端列2個圓圈，中間列1個居中圓圈）Column() {Text().ys()Text().ys()}.height('100%').justifyContent(FlexAlign.SpaceBetween)Column() {Text().ys()}.height('100%').justifyContent(FlexAlign.Center)Column() {Text().ys()Text().ys()}.height('100%').justifyContent(FlexAlign.SpaceBetween)} else {// 情況6：兩列，每列三個均勻分布的圓圈Column() {Text().ys()Text().ys()Text().ys()}.height('100%').justifyContent(FlexAlign.SpaceBetween)Column() {Text().ys()Text().ys()Text().ys()}.height('100%').justifyContent(FlexAlign.SpaceBetween)}}// 容器基礎樣式.width(100).height(100).borderRadius(10).padding(10)// 根據索引取顏色（注意數組下標從0開始）.backgroundColor(this.color[item - 1])})}}// 頁面整體樣式.padding(30)          // 外圍留白30vp.backgroundColor("#eee") // 灰色背景.width('100%')        // 撐滿父容器.height(300)          // 固定高度300vp}
}

效果圖如下：