// 顶部引入路由
import { router } from '@kit.ArkUI'
使用
router.pushUrl({url:'需要跳转的路径'})
Navigation() // 导航栏
通过.titleMode(NavigationTitleMode.Mini) 设置标题栏模式
页面显示模式
mode(NavigatigonMode.Auto) // 自适应模式
自适应模式下,当页面宽度大于等于一定阈值( API version 9及以前:520vp,API version 10及以后:600vp )时,Navigation组件采用分栏模式,反之采用单栏模式
Stack 单页面显示模式 (如果不是三折叠手机,基本使用单页面显示模式)
Split 分栏模式
导航页可以通过hideNavBar进行隐藏
Navigation通过titleMode 设置标题栏
titlebar和菜单栏menu
Navigation 子组件
工具栏位于页面底部,通过toolBarConfiguration配置
Navigation路由操作基于页面栈NavPathStack提供的方法进行。
链接:文档中心
通过alignContent属性修改子元素布局,调整zIndex控制子元素层级
主轴默认为水平方向排列
VerticalAlign 在交叉轴上的排列
.alignItems(VerticalAlign.Center)
主轴默认为垂直方向排列
HorizontalAlign在水平方向上的排列
.alignItems(HorizontalAlign.Start) // 水平方向上的排列
通过justifyContent属性改变row水平方向上的排列和Column交叉轴上的排列
space: 10 设置子元素之间的间距
自适应拉伸:
空白填充组件Blank()
权重比:layoutWeight()
自适应延伸使用scroll组件,滚动条解决一屏展示不全的效果
ListItemGroup 分组列表
scrollBar 滚动条显示,scrollBar属性API version 9及以下版本默认值为BarState.Off,从API version 10版本开始默认值为BarState.Auto
.scrollBar(BarState.Auto)
sticky列表粘性布局
.sticky(StickyStyle.Header) // 设置吸顶,实现粘性标题效果
返回顶部,scrollToIndex修改数值为o即可
位置响应,侧滑,增加,删除,编辑,下拉刷新和上拉加载等功能
scroll会限制子元素的宽高,由其设计决定的,其内部子元素的尺寸和位置需要由Scroll组件统一管理,以确保滚动时的界面效果。因此,子元素的宽度和高度会受到Scroll组件的限制。
在没有给定宽高的情况下,渲染性能会有所下降,但是如果需要兼容横屏情况下的展示,最好不要给固定宽高,需要做取舍。
scrollable(ScrollDirection.Vertical): 设置滚动方向
scrollBarColor: 设置滚动条的颜色
scrollBar: 滚动条是否可滑动和显示
scrollBarWidth: 滚动条宽度,不支持百分比
edgeEffect(edgeEffect.Spring): 物理回弹效果,继续滑动一段距离。
网络
在module.json5中添加网络配置
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
],