List Navigation
Row() {
// Column() {
// Text(this.message)
// .fontSize(50)
// .fontWeight(FontWeight.Bold)
// }
// .width('100%')
//标题栏 路由容器组件
Navigation() {
Column(){
List({space:2})
{
ListItem(){
Row(){
// Text('left')
// Text('left2')
// Text('left3')
// Text('left4')
Row(){
Image($r('app.media.icon'))
.width('24vp')
.height('24vp')
.margin({left:'8vp',right:'8vp'})
Text('up')
.fontSize('20fp')}
Row(){
Text('open')
.fontSize('16fp')
Image($r('app.media.icon'))
.width('8vp')
.height('24vp')
.margin({left:'8vp',right:'8vp'})
}}
.width('95%')
.justifyContent(FlexAlign.SpaceBetween)
//align
}
.height(('60vp'))
.backgroundColor(Color.White)
.borderRadius('12vp')
.margin({left:'12vp',right:'8vp'})
}
}.width('100%')
}.title('work list ')
.titleMode(NavigationTitleMode.Mini)//tt mode
}
.width('100%')
// .height('100%')
.backgroundColor('#f1f3f5')
}
Component
//自定义组件
@Component
export default struct TaskList{
build(){
List({space:2})
{
ListItem(){
Row(){
// Text('left')
// Text('left2')
// Text('left3')
// Text('left4')
Row(){
Image($r('app.media.icon'))
.width('24vp')
.height('24vp')
.margin({left:'8vp',right:'8vp'})
Text('up')
.fontSize('20fp')}
Row(){
Text('open')
.fontSize('16fp')
Image($r('app.media.icon'))
.width('8vp')
.height('24vp')
.margin({left:'8vp',right:'8vp'})
}}
.width('95%')
.justifyContent(FlexAlign.SpaceBetween)
//align
}
.height(('60vp'))
.backgroundColor(Color.White)
.borderRadius('12vp')
.margin({left:'12vp',right:'8vp'})
}}}import {TaskListData} from '../viewsmodel/TaskListData'
Column(){
TaskList()
TaskList()
TaskList()
}.width('100%')
data
export interface ITaskList {
taskid:number;
taskname:string;
icon:string|Resource,
isopen:Boolean,
tasktime:string;
taskweek:string;
}
export const TaskListData:Array<ITaskList>=[{
taskid:1,
taskname:'up day1 ',
icon:$r('app.media.app_icon'),
isopen:true,
tasktime:'08:00',
taskweek:'1'
}
,{
taskid:2,
taskname:'study 1',
icon:$r('app.media.app_icon'),
isopen:true,
tasktime:'10:00',
taskweek:'1'
}
,{
taskid:3,
taskname:'up day2',
icon:$r('app.media.app_icon'),
isopen:true,
tasktime:'08:00',
taskweek:'2'
},
{
taskid:4,
taskname:'study 22',
icon:$r('app.media.app_icon'),
isopen:false,
tasktime:'09:00',
taskweek:'2'
},
{
taskid:5,
taskname:'study33 ',
icon:$r('app.media.app_icon'),
isopen:false,
tasktime:'13:00',
taskweek:'2'
}
]Provide =>
export import 数据
foreach item item.index item.taskname ...
ForEach(this.tasklist, (item: ITaskList, index?: number) => {
//listitem
ListItem(){
Row(){
Row(){
Image(item.icon)
.width('24vp')
.height('24vp')
.margin({left:'8vp',right:'8vp'})
Text(item.taskname)
...router
import router from '@ohos.router'
main_pages.json注册路由
"src": [
"pages/Index",
...
]添加nav点击事件
.onClick(() => {
router.pushUrl({
url: "pages/info"})})page/info
@Entry
@Component
struct Index {
//同步
onPageShow() {
console.info('Index onPageShow');
//const tests = test();
}
build() {
Row() {
//标题栏 路由容器组件
Navigation() {
Column(){
}.width('100%')
}.title('work info')
.titleMode(NavigationTitleMode.Mini)//tt mode
}
.width('100%')
// .height('100%')
.backgroundColor('#f1f3f5')
}
}
onclick => info
info
import {TaskChooseItem,TaskTimeItem} from '../views/TaskInfoitem'
@Component
export default struct taskInfoList {
build() {
//list
List() {
ListItem(){
TaskChooseItem()
}
.height('60vp')
.backgroundColor(Color.White)
.borderRadius('10vp')
.padding('10vp')
}
.height('60vp')
.backgroundColor(Color.White)
.width('90%')
}
}//up //time //
@Component
//不加default 可以导出多个
export struct TaskChooseItem{
build() {
Row() {
// Text('up')
// .fontSize('20fp')
// Toggle({ type: ToggleType.Switch, isOn: true })
Row(){
Text('up~')
Toggle({type:ToggleType.Switch,isOn:true})
.width('55vp')
.height('30vp')
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
}
}
}
@Component
export struct TaskTimeItem{
build() {
}
}
@Component
export struct TaskExItem{
build() {
}
}
router
router.pushUrl({
url: "pages/info",
params:{
params:JSON.stringify(item)
}
})export default struct taskInfoList {
@Provide routerItem:ITaskList = this.getRouterParams();// router.getParams() as Record<string,Object>
//router params
getRouterParams() {
const params = router.getParams() as Record<string,Object>;
const routerParams:ITaskList = JSON.parse(params.params as string);
return routerParams;
}
...
@Provide @Consume
数据绑定
@Consume routerItem:ITaskList;
...
Row(){
Text(this.routerItem.taskname)TextPickerDialog
@State week:string []=['星期一','星期二','星期三','星期四','星期五','星期六','星期天'];
...
.onClick(()=>{
TextPickerDialog.show({
range:this.week,
})
})
TimePickerDialog
TimePickerDialog.show({
selected:new Date('2024-04-24T08:00:00'),
useMilitaryTime:true,//24h false
onAccept:(value:TimePickerResult)=>{
},
})
List Navigation @ohos.router@Provide @ConsumeTextPickerDialogTimePickerDialog
移动开发 鸿蒙开发 ArkTs
End