仓颉鸿蒙开发：制作底部标签栏

今天制作标签栏，标签栏里面的有4个区域：首页、社区、消息、我的，以及对应的图标。点击的区域显示为高亮，未点击的区域显示为灰色

简单的将视图上面区域做一下

一、制作顶部公共视图部分

internal import ohos.base.*
internal import ohos.component.*
internal import ohos.state_manage.*
import ohos.state_macro_manage.*
import ohos.resource_manager.*

@Component
public class TopView {
    func build() {
        Row(10) {
            Image(@r(app.media.cjLoge1)).width(50).height(50)
            Text("仓颉鸿蒙开发集成应用").fontSize(22).fontWeight(FontWeight.Bold)
        }.width(100.percent).height(12.percent).justifyContent(FlexAlign.Center)
    }
}

二、中间内容部分：添加了两个文本组件

            //中间内容区
            Column() {
                Text("仓颉鸿蒙").fontSize(36).fontColor(0x00BFFF)
                Text("制作底部标签栏").fontSize(30).fontColor(0x00BFFF)
            }.width(100.percent).height(80.percent).justifyContent(FlexAlign.Center)

三、底部标签栏的制作

        1.新建一个数组，用于存放文字内容和图标位置信息，方便使用循环遍历

    //定义底部标签栏数组，数组中的元素为元组类型
    var menuDatas: Array<(String, String)> = [
        ("首页", "resource://media/house_fill.svg"),
        ("社区", "resource://media/beidou_satellite_fill.svg"),
        ("消息", "resource://media/ellipsis_message_fill.svg"),
        ("我的", "resource://media/person_crop_circle_fill_1.svg")
    ]

        2.标签栏分为4个区域：首页、社区、消息、我的，采用行布局；每个区域由图片组件和文本组件组成，采用列布局；而这些信息已经存放在数组里面了，使用FouEach循环遍历数组，为每一个元素添加组件信息；设置点击事件，通过判断索引号是否相等，将选中的标签设置为高亮颜色，未选中的标签颜色为灰色

    @State
    var currentIndex: Int64 = 0 //记录当前点击的索引号

            //底部标签栏
            Row() {
                ForEach(
                    this.menuDatas,
                    itemGeneratorFunc: {
                        item: (String, String), index: Int64 => Column() {
                            Image(item[1])
                                .width(30)
                                .height(30)
                                .fillColor(if (this.currentIndex == index) {
                                    0x00BFFF
                                } else {
                                    0xD3D3D3
                                })

                            Text(item[0])
                                .fontSize(14)
                                .fontWeight(Bold)
                                .fontColor(if (this.currentIndex == index) {
                                    0x00BFFF   // 相等，设置为高亮色
                                } else {
                                    0xD3D3D3   //不相等，设置为灰色
                                })
                        }
                            .width(20.percent)
                            .height(100.percent)
                            .justifyContent(FlexAlign.Center)
                            //对每一块设置点击事件
                            .onClick(
                                {
                                    event =>
                                    this.currentIndex = index
                                    Hilog.info(0x000000, "hilog", "当前点击的索引为：${this.currentIndex}")
                                }
                            )
                    }
                )
            }
                .width(100.percent)
                .height(8.percent)
                .backgroundColor(0xF5F5F5)
                .justifyContent(FlexAlign.SpaceBetween)
                .borderRadius(5) //设置圆角

        模拟机运行效果：例如，点击“消息”，显示为高亮

   

---

        最后，标签栏中使用的图标为svg格式，因为image组件中的fillColor构造函数，仅对svg图源生效。