【Flex】【RK3568】【概率-必现】组件参数wrap的参数值是Wrap或者WrapReverse时，不是多行排列而是超出父容器一行排列

【任务描述】组件参数wrap的参数值是Wrap或者WrapReverse时，不是多行排列而是超出父容器一行排列

【解决方案】NA

【任务来源】
@Entry
@Component
struct FlexTestPage {
    @State count : number = 0;
    @State dir : FlexDirection = FlexDirection.Row;
    @State wrap: FlexWrap = FlexWrap.NoWrap;
    @State align1 : FlexAlign = FlexAlign.Start;
    @State align2 : ItemAlign = ItemAlign.Stretch;
    @State align3 : FlexAlign = FlexAlign.Start;
    @State idx1 : number = 0;
    @State idx2 : number = 0;
    @State idx3 : number = 0;
    @State idx4 : number = 0;
    @State idx5 : number = 0;
    private dirList : FlexDirection[] = [FlexDirection.Row, FlexDirection.RowReverse, FlexDirection.Column, FlexDirection.ColumnReverse];
    private wrapList : FlexWrap[] = [FlexWrap.NoWrap, FlexWrap.Wrap, FlexWrap.WrapReverse];
    private flexAlignList : FlexAlign[] = [FlexAlign.Start, FlexAlign.Center, FlexAlign.End, FlexAlign.SpaceBetween, FlexAlign.SpaceAround, FlexAlign.SpaceEvenly];
    private itemAlignList : ItemAlign[] = [ItemAlign.Stretch, ItemAlign.Start, ItemAlign.Center, ItemAlign.End, ItemAlign.Baseline];
    build() {
        Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center}) {
            Button() {
                Text(this.count % 5 + 1 + 'stack')
                    .fontSize(12)
                    .fontWeight(FontWeight.Bold)
            }
            .width(55).height(55)
            .type(ButtonType.Circle)
            .onClick(() => {
                this.count++
            })
            Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap}) {
                Button() {
                    if (this.idx1 % 4 == 0) {
                        Text() {
                            Span('direction:\n')
//                                .textCase(TextCase.UpperCase)
                                .fontSize(16)
                                .fontWeight(FontWeight.Bold)
                            Span('Row')
                                .fontColor(Color.Orange)
                                .fontSize(15)
                                .fontStyle(FontStyle.Italic)
                        }
                    } else if (this.idx1 % 4 == 1) {
                        Text() {
                            Span('direction:\n')
//                                .textCase(TextCase.UpperCase)
                                .fontSize(16)
                                .fontWeight(FontWeight.Bold)
                            Span('RowReverse')
                                .fontColor(Color.Orange)
                                .fontSize(15)
                                .fontStyle(FontStyle.Italic)
                        }
                    } else if (this.idx1 % 4 == 2) {
                        Text() {
                            Span('direction:\n')
//                                .textCase(TextCase.UpperCase)
                                .fontSize(16)
                                .fontWeight(FontWeight.Bold)
                            Span('Column')
                                .fontColor(Color.Orange)
                                .fontSize(15)
                                .fontStyle(FontStyle.Italic)
                        }
                    } else {
                        Text() {
                            Span('direction:\n')
//                                .textCase(TextCase.UpperCase)
                                .fontSize(16)
                                .fontWeight(FontWeight.Bold)
                            Span('ColumnReverse')
                                .fontColor(Color.Orange)
                                .fontSize(15)
                                .fontStyle(FontStyle.Italic)
                        }
                    }
                }
                .width(160).height(60)
                .margin({left: 12, right: 12, top: 15, bottom: 15})
                .onClick(() => {
                    this.idx1++
                    this.dir = this.dirList[this.idx1 % 4]
                })
                Button() {
                    if (this.idx2 % 3 == 0) {
                        Text() {
                            Span('wrap:\n')
//                                .textCase(TextCase.UpperCase)
                                .fontSize(16)
                                .fontWeight(FontWeight.Bold)
                            Span('NoWrap')
                                .fontColor(Color.Orange)
                                .fontSize(15)
                                .fontStyle(FontStyle.Italic)
                        }
                    } else if (this.idx2 % 3 ==  1) {
                        Text() {
                            Span('wrap:\n')
//                                .textCase(TextCase.UpperCase)
                                .fontSize(16)
                                .fontWeight(FontWeight.Bold)
                            Span('Wrap')
                                .fontColor(Color.Orange)
                                .fontSize(15)
                                .fontStyle(FontStyle.Italic)
                        }
                    } else {
                        Text() {
                            Span('wrap:\n')
//                                .textCase(TextCase.UpperCase)
                                .fontSize(16)
                                .fontWeight(FontWeight.Bold)
                            Span('WrapReverse')
                                .fontColor(Color.Orange)
                                .fontSize(15)
                                .fontStyle(FontStyle.Italic)
                        }
                    }
                }
                .width(160).height(60)
                .margin({left: 12, right: 12, top: 15, bottom: 15})
                .onClick(() => {
                    this.idx2++
                    this.wrap = this.wrapList[this.idx2 % 3]
                })
                Button() {
                    if (this.idx3 % 5 == 1) {
                        Text() {
                            Span('alignItems:\n')
//                                .textCase(TextCase.UpperCase)
                                .fontSize(16)
                                .fontWeight(FontWeight.Bold)
                            Span('Start')
                                .fontColor(Color.Orange)
                                .fontSize(15)
                                .fontStyle(FontStyle.Italic)
                        }
                    } else if (this.idx3 % 5 == 2) {
                        Text() {
                            Span('alignItems:\n')
//                                .textCase(TextCase.UpperCase)
                                .fontSize(16)
                                .fontWeight(FontWeight.Bold)
                            Span('Center')
                                .fontColor(Color.Orange)
                                .fontSize(15)
                                .fontStyle(FontStyle.Italic)
                        }
                    } else if (this.idx3 % 5 == 3) {
                        Text() {
                            Span('alignItems:\n')
//                                .textCase(TextCase.UpperCase)
                                .fontSize(16)
                                .fontWeight(FontWeight.Bold)
                            Span('End')
                                .fontColor(Color.Orange)
                                .fontSize(15)
                                .fontStyle(FontStyle.Italic)
                        }
                    } else if (this.idx3 % 5 == 4) {
                        Text() {
                            Span('alignItems:\n')
//                                .textCase(TextCase.UpperCase)
                                .fontSize(16)
                                .fontWeight(FontWeight.Bold)
                            Span('Baseline')
                                .fontColor(Color.Orange)
                                .fontSize(15)
                                .fontStyle(FontStyle.Italic)
                        }
                    } else {
                        Text() {
                            Span('alignItems:\n')
//                                .textCase(TextCase.UpperCase)
                                .fontSize(16)
                                .fontWeight(FontWeight.Bold)
                            Span('Stretch')
                                .fontColor(Color.Orange)
                                .fontSize(15)
                                .fontStyle(FontStyle.Italic)
                        }
                    }
                }
                .width(160).height(60)
                .margin({left: 12, right: 12, top: 15, bottom: 15})
                .onClick(() => {
                    this.idx3++
                    this.align2 = this.itemAlignList[this.idx3 % 5]
                })
                Button() {
                    if (this.idx4 % 6 == 0) {
                        Text() {
                            Span('justifyContent:\n')
//                                .textCase(TextCase.UpperCase)
                                .fontSize(16)
                                .fontWeight(FontWeight.Bold)
                            Span('Start')
                                .fontColor(Color.Orange)
                                .fontSize(15)
                                .fontStyle(FontStyle.Italic)
                        }
                    } else if (this.idx4 % 6 == 1) {
                        Text() {
                            Span('justifyContent:\n')
//                                .textCase(TextCase.UpperCase)
                                .fontSize(16)
                                .fontWeight(FontWeight.Bold)
                            Span('Center')
                                .fontColor(Color.Orange)
                                .fontSize(15)
                                .fontStyle(FontStyle.Italic)
                        }
                    } else if (this.idx4 % 6 == 2) {
                        Text() {
                            Span('justifyContent:\n')
//                                .textCase(TextCase.UpperCase)
                                .fontSize(16)
                                .fontWeight(FontWeight.Bold)
                            Span('End')
                                .fontColor(Color.Orange)
                                .fontSize(15)
                                .fontStyle(FontStyle.Italic)
                        }
                    } else if (this.idx4 % 6 == 3) {
                        Text() {
                            Span('justifyContent:\n')
//                                .textCase(TextCase.UpperCase)
                                .fontSize(16)
                                .fontWeight(FontWeight.Bold)
                            Span('SpaceBetween')
                                .fontColor(Color.Orange)
                                .fontSize(15)
                                .fontStyle(FontStyle.Italic)
                        }
                    } else if (this.idx4 % 6 == 4) {
                        Text() {
                            Span('justifyContent:\n')
//                                .textCase(TextCase.UpperCase)
                                .fontSize(16)
                                .fontWeight(FontWeight.Bold)
                            Span('SpaceAround')
                                .fontColor(Color.Orange)
                                .fontSize(15)
                                .fontStyle(FontStyle.Italic)
                        }
                    } else {
                        Text() {
                            Span('justifyContent:\n')
//                                .textCase(TextCase.UpperCase)
                                .fontSize(16)
                                .fontWeight(FontWeight.Bold)
                            Span('SpaceEvenly')
                                .fontColor(Color.Orange)
                                .fontSize(15)
                                .fontStyle(FontStyle.Italic)
                        }
                    }
                }
                .width(160).height(60)
                .margin({left: 12, right: 12, top: 15, bottom: 15})
                .onClick(() => {
                    this.idx4++
                    this.align1 = this.flexAlignList[this.idx4 % 6]
                })
                Button() {
                    if (this.idx5 % 6 == 0) {
                        Text() {
                            Span('alignContent:\n')
//                                .textCase(TextCase.UpperCase)
                                .fontSize(16)
                                .fontWeight(FontWeight.Bold)
                            Span('Start')
                                .fontColor(Color.Orange)
                                .fontSize(15)
                                .fontStyle(FontStyle.Italic)
                        }
                    } else if (this.idx5 % 6 == 1) {
                        Text() {
                            Span('alignContent:\n')
//                                .textCase(TextCase.UpperCase)
                                .fontSize(16)
                                .fontWeight(FontWeight.Bold)
                            Span('Center')
                                .fontColor(Color.Orange)
                                .fontSize(15)
                                .fontStyle(FontStyle.Italic)
                        }
                    } else if (this.idx5 % 6 == 2) {
                        Text() {
                            Span('alignContent:\n')
//                                .textCase(TextCase.UpperCase)
                                .fontSize(16)
                                .fontWeight(FontWeight.Bold)
                            Span('End')
                                .fontColor(Color.Orange)
                                .fontSize(15)
                                .fontStyle(FontStyle.Italic)
                        }
                    } else if (this.idx5 % 6 == 3) {
                        Text() {
                            Span('alignContent:\n')
//                                .textCase(TextCase.UpperCase)
                                .fontSize(16)
                                .fontWeight(FontWeight.Bold)
                            Span('SpaceBetween')
                                .fontColor(Color.Orange)
                                .fontSize(15)
                                .fontStyle(FontStyle.Italic)
                        }
                    } else if (this.idx5 % 6 == 4) {
                        Text() {
                            Span('alignContent:\n')
//                                .textCase(TextCase.UpperCase)
                                .fontSize(16)
                                .fontWeight(FontWeight.Bold)
                            Span('SpaceAround')
                                .fontColor(Color.Orange)
                                .fontSize(15)
                                .fontStyle(FontStyle.Italic)
                        }
                    } else {
                        Text() {
                            Span('alignContent:\n')
//                                .textCase(TextCase.UpperCase)
                                .fontSize(16)
                                .fontWeight(FontWeight.Bold)
                            Span('SpaceEvenly')
                                .fontColor(Color.Orange)
                                .fontSize(15)
                                .fontStyle(FontStyle.Italic)
                        }
                    }
                }
                .width(160).height(60)
                .margin({left: 12, right: 12, top: 15, bottom: 15})
                .onClick(() => {
                    this.idx5++
                    this.align3 = this.flexAlignList[this.idx5 % 6]
                })
            }
            .margin({bottom: 25})
            Flex({direction: this.dir, wrap: this.wrap, justifyContent: this.align1, alignItems: this.align2, alignContent: this.align3}) {
                if (this.count % 5 == 0) {
                    Stack() {
                        Text('1')
                            .fontSize(18)
                    }
                    .width(100).height(100)
                    .backgroundColor('#FFC0CB')
                } else if (this.count % 5 == 1) {
                    Stack() {
                        Text('1')
                            .fontSize(18)
                    }
                    .width(100).height(100)
                    .backgroundColor('#FFC0CB')
                    Stack() {
                        Text('2')
                            .fontSize(18)
                    }
                    .width(100).height(120)
                    .backgroundColor('#C71585')
                } else if (this.count % 5 == 2) {
                    Stack() {
                        Text('1')
                            .fontSize(18)
                    }
                    .width(100).height(100)
                    .backgroundColor('#FFC0CB')
                    Stack() {
                        Text('2')
                            .fontSize(18)
                    }
                    .width(100).height(120)
                    .backgroundColor('#C71585')
                    Stack() {
                        Text('3')
                            .fontSize(18)
                    }
                    .width(100).height(140)
                    .backgroundColor('#483D8B')
                } else if (this.count % 5 == 3) {
                    Stack() {
                        Text('1')
                            .fontSize(18)
                    }
                    .width(100).height(100)
                    .backgroundColor('#FFC0CB')
                    Stack() {
                        Text('2')
                            .fontSize(18)
                    }
                    .width(100).height(120)
                    .backgroundColor('#C71585')
                    Stack() {
                        Text('3')
                            .fontSize(18)
                    }
                    .width(100).height(140)
                    .backgroundColor('#483D8B')
                    Stack() {
                        Text('4')
                            .fontSize(18)
                    }
                    .width(100).height(160)
                    .backgroundColor('#4682B4')
                } else {
                    Stack() {
                        Text('1')
                            .fontSize(18)
                    }
                    .width(100).height(100)
                    .backgroundColor('#FFC0CB')
                    Stack() {
                        Text('2')
                            .fontSize(18)
                    }
                    .width(100).height(120)
                    .backgroundColor('#C71585')
                    Stack() {
                        Text('3')
                            .fontSize(18)
                    }
                    .width(100).height(140)
                    .backgroundColor('#483D8B')
                    Stack() {
                        Text('4')
                            .fontSize(18)
                    }
                    .width(100).height(160)
                    .backgroundColor('#4682B4')
                    Stack() {
                        Text('5')
                            .fontSize(18)
                    }
                    .width(100).height(180)
                    .backgroundColor('#7FFFAA')
                    .onAppear(() => {
                        console.info('luoying --- Show Stack')
                    })
                    .onDisAppear(() => {
                        console.info('luoying --- Hide Stack')
                    })
                }
            }
            .width(320).height(320)
            .border({width:4, color: '#FF4500'})
            .onAppear(() => {
                console.info('luoying --- Show Flex')
            })
            .onDisAppear(() => {
                console.info('luoying --- Hide Flex')
            })
        }
    }
}

OpenHarmony/arkui_ace_engine
Closed

Content Risk Flag

Comments (2)

OpenHarmony/arkui_ace_engineClosed .gitee-modal { width: 500px !important; }

Content Risk Flag