HarmonyOS鸿蒙Next中实现中间凸起导航示例代码

HarmonyOS鸿蒙Next中实现中间凸起导航示例代码介绍
本示例实现点击底部TabBar切换展示页面，同时会有选中的图标变化动效，中间凸起的底部导航。

效果预览

图片名称

使用说明
点击切换导航，选中后展示不同特效。

实现思路

添加TabContent()组件，构建底部导航栏；

TabContent() {
  Text('home')
    .fontSize('title_font_size')
    .padding(20)
}

在数据量比较少的情况下使用ForEach加载TabItem；

ForEach(TABINFO, (item: TabBarDataType, tabIndex: number) => {
  // 单独一个TabBar组件
  TabItem({
    iconOffset: this.iconOffset,
    tabBarIndex: tabIndex,
    selectedIndex: $selectedIndex,
  })
})

实现TabBar中间凸起。

将Image外层包括一层容器组件，通过设置borderRadius以及margin的top值实现圆弧外轮廓效果
borderRadius的值设置为容器组件宽度的一半，margin的top值根据ux效果设置合适的值

if (this.tabBarIndex === COMMUNITY_TAB_BAR_INDEX) {
  Column() {
    Image(this.selectedIndex === this.tabBarIndex ? TABINFO[this.tabBarIndex].selectedIcon : TABINFO[this.tabBarIndex].defaultIcon)
      .size({
        width: 'community_image_size',
        height: 'community_image_size'
      })// TODO：知识点：使用interpolation属性对图片进行插值，使图片显示得更清晰
      .interpolation(ImageInterpolation.High)
      .borderRadius('community_image_container_border_radius_size')
  }
  .width('community_image_container_size')
  .height('community_image_container_size')
  // TODO：知识点：通过设置borderRadius以及margin的top值实现圆弧外轮廓效果。
  .borderRadius('community_image_container_border_radius_size')
  .margin({ top: ARC_MARGIN_TOP })
  .backgroundColor(Color.White)
  .justifyContent(FlexAlign.Center)
}

更多关于HarmonyOS鸿蒙Next中实现中间凸起导航示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

yibo5220 1楼•13 天前

在HarmonyOS鸿蒙Next中实现中间凸起导航，可以使用BottomNavigation组件，并通过自定义样式来实现中间凸起的效果。以下是一个示例代码：

import { BottomNavigation, BottomNavigationItem } from '@ohos/ui';
import { Resource } from '@ohos/resource';

export default {
  data: {
    selectedIndex: 0
  },
  onInit() {
    this.navigationItems = [
      { icon: $r('app.media.home'), text: '首页' },
      { icon: $r('app.media.camera'), text: '拍照' },
      { icon: $r('app.media.profile'), text: '我的' }
    ];
  },
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      BottomNavigation({
        selectedIndex: this.selectedIndex,
        onSelected: (index) => {
          this.selectedIndex = index;
        }
      }) {
        ForEach(this.navigationItems, (item, index) => {
          BottomNavigationItem({
            icon: item.icon,
            text: item.text,
            style: index === 1 ? { borderRadius: 50, backgroundColor: '#FFA500', padding: 10 } : {}
          });
        });
      }
    }
  }
}

在这个示例中，BottomNavigation组件用于创建底部导航栏，BottomNavigationItem用于定义每个导航项。通过在style属性中为中间的导航项设置borderRadius和backgroundColor，实现了中间凸起的效果。

更多关于HarmonyOS鸿蒙Next中实现中间凸起导航示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

yibo5220 2楼•13 天前

在HarmonyOS鸿蒙Next中实现中间凸起的导航栏，可以通过自定义布局和样式来实现。以下是一个简单的示例代码：

// 创建自定义导航栏布局
public class CustomBottomNavigation extends ComponentContainer {
    public CustomBottomNavigation(Context context) {
        super(context);
        initView();
    }

    private void initView() {
        // 创建底部导航栏容器
        DirectionalLayout layout = new DirectionalLayout(getContext());
        layout.setWidth(ComponentContainer.LayoutConfig.MATCH_PARENT);
        layout.setHeight(200); // 设置高度
        layout.setBackground(ElementFactory.createBackground(Color.WHITE));

        // 创建中间凸起的按钮
        Button centerButton = new Button(getContext());
        centerButton.setWidth(100);
        centerButton.setHeight(100);
        centerButton.setBackground(ElementFactory.createBackground(Color.BLUE));
        centerButton.setPosition(350, -50); // 设置凸起位置

        // 将按钮添加到布局中
        layout.addComponent(centerButton);

        // 将布局添加到容器
        addComponent(layout);
    }
}

在`MainAbilitySlice`中使用：

```java
public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        CustomBottomNavigation navigation = new CustomBottomNavigation(this);
        setUIContent(navigation);
    }
}

这个示例创建了一个自定义的底部导航栏，中间按钮凸起。你可以根据需求调整样式和布局。