HarmonyOS 鸿蒙Next Search组件中文本垂直方向不居中解决办法求助

HarmonyOS 鸿蒙Next Search组件中文本垂直方向不居中解决办法求助 如图,Search组件默认的文本, 垂直方向不居中!导致不居中的原因竟然是给 ListItem 设置高度!

设置.align(Alignment.Center) 无效! 有遇到类似问题的嘛!

从上边图到下边图只给ListItem加了一个高度,其他都没动,然后就导致Search组件中的文本在垂直方向不居中

cke_22344.png

cke_24986.png

cke_21505.png


更多关于HarmonyOS 鸿蒙Next Search组件中文本垂直方向不居中解决办法求助的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

父容器 Flex高度 100% Row1高度都是确定的

Row2的高度不确定!!! List的外层你放了个Row他的高度是不定的!!!

forEach循环的元素个数多,你设置了高度之后,撑开了Row的高度,三个Row高度加起来比父容器高度都大,溢出了,Flex是弹性盒子,会互相挤压导致样式跑版

两种解决搜索组件不居中的办法: 办法一:Search和他的容器固定高度 办法二:第三个Row固定高度或者分得最后的高度

也可以组合着用更合理

更多关于HarmonyOS 鸿蒙Next Search组件中文本垂直方向不居中解决办法求助的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


啊啊! 明白啦! 感谢!

给你我的代码,可以复制下来尝试,更快捷

@Entry
@Component
struct Index {

  @State arr: Array<string> = ['22', '33', '44', '55', '66', '77', '88', '99', '00', '11']

  build() {
    Flex({
      direction: FlexDirection.Column,
      justifyContent: FlexAlign.Start,
      alignItems: ItemAlign.Center
    }){
      Row(){
        Text('关系型数据库')
        Blank()
        Image($r('app.media.icon')).width(30).height(30)
      }
      .width('100%')
      .height(70)
      .padding({
        left: 16
      })
      .alignItems(VerticalAlign.Center)
      .backgroundColor('#7fb80e')

      Row(){
        Search({
          placeholder: '搜索'
        })
          // .height('100%')
      }
      // .height(55)
      .width('100%')
      .padding({
        left: 16,
        right: 16
      })
      .margin({
        top: 8
      })

      Row(){
        List(){
          ForEach(this.arr, (item: string) => {
            ListItem(){
              Row(){
                Text(item)
              }.width('100%').backgroundColor('#c0c0c0').height(80)
            }
          }, (item: string) => item)
        }
      }.layoutWeight(1).width('100%').padding({
        left: 16,
        right: 16,
        bottom: 16
      })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#fff1f3f5')
  }
}

好的好的,谢谢!成功解决! 还是对flex不够熟悉,

你应该不是做web的,前端flex用了很多年了对这个弹性布局很熟悉。

找HarmonyOS工作还需要会Flutter的哦,有需要Flutter教程的可以学学大地老师的教程,很不错,B站免费学的哦:BV1S4411E7LY/?p=17

我去年毕业,做了不到一年安卓,哈哈哈,

尝试了: 不给ListItem高度,给ListItem中的布局高度,还是一样会导致Search组件文本不居中,
或给ListItem中的布局的组件设置高度也会导致这个问题

![cke_5153.png](data-originheight=“318” data-originwidth=“836” src="https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtybbs/706/269/612/0030086000706269612.20240109134101.66775780724072067561394297376215:50001231000000:2800:A234897933E77E2B591C97076E6F311173DEE6F0C1C1EBE9649995719C668C5D.png)

在HarmonyOS鸿蒙Next中,Search组件文本垂直方向不居中的问题,通常是由于布局或样式的设置不当导致的。可以通过以下步骤进行调整:

  1. 检查布局设置:确保Search组件的父容器和子元素的布局属性(如heightpaddingmargin)设置合理,避免出现不必要的间距或挤压。

  2. 使用align-items属性:在父容器中设置align-items: center;,可以使子元素在垂直方向上居中。

  3. 调整文本样式:如果文本本身有line-heightfont-size设置,确保这些值与容器的高度相匹配,以避免文本偏移。

  4. 使用TextAlign属性:在Search组件中,可以通过设置TextAlign属性为TextAlign.Center,使文本在水平和垂直方向上居中。

  5. 检查组件默认样式:某些组件可能自带默认样式,可以通过覆盖这些样式来调整文本的垂直居中效果。

通过以上步骤,可以有效解决Search组件中文本垂直方向不居中的问题。

回到顶部