纯血鸿蒙组件库AUI：搜索栏组件

摘要：
搜索数据。关键属性：颜色及设置搜索提示语。可设置组件宽度，默认100%。

调用示例一：极简调用

1.将搜索栏组件拖拽到页面排版区即可

调用示例二：更多属性

2.设置组件宽度、颜色和提示语文字
3.保存设置

生成纯血鸿蒙代码：

  GridCol({ span: 12 }) {
              Search({ value: '', placeholder: '搜索....' })// TODO 将value值改为变量
                .searchButton('搜索', {
                  fontColor: this.primaryColor
                })
                .width(GirdConstants.FULL_PERCENT)
                .height(FloatConstants.HEIGHT_INPUT)
                .placeholderColor(ColorConstants.FG_LEVEL3)
                .placeholderFont({
                  size: FloatConstants.FONT_SIZE_BODY2,
                  weight: FontWeight.Normal
                })
                .textFont({
                  size: FloatConstants.FONT_SIZE_BODY2,
                  weight: Number(FloatConstants.FONT_WEIGHT_BODY2)
                })
                .onSubmit((value: string) => {
                  // TODO 完成搜索交互
                })
            }

            GridCol({ span: 6 }) {
              Search({ value: '', placeholder: '搜索AI动态....' })// TODO 将value值改为变量
                .searchButton('搜索', {
                  fontColor: ColorConstants.SUCCESS
                })
                .width(GirdConstants.FULL_PERCENT)
                .height(FloatConstants.HEIGHT_INPUT)
                .placeholderColor(ColorConstants.FG_LEVEL3)
                .placeholderFont({
                  size: FloatConstants.FONT_SIZE_BODY2,
                  weight: FontWeight.Normal
                })
                .textFont({
                  size: FloatConstants.FONT_SIZE_BODY2,
                  weight: Number(FloatConstants.FONT_WEIGHT_BODY2)
                })
                .onSubmit((value: string) => {
                  // TODO 完成搜索交互
                })
            }

以下分别为搜索栏组件在平板、折叠屏、手机，以及在浅色模式和深色模式下的表现：