实现Text组件中文本两端对齐方案
![](https://img.haomeiwen.com/i11217637/8ebf3674901e36e5.png)
@Entry
@Component
struct Page29 {
@State str_1 :string = '文本内容'
@State str_2 :string = '文本内容文本内容abcd1234也对也不对,八荣八耻。'
build() {
Column() {
Text('单行效果')
Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceBetween }) {
ForEach(this.str_1.split(''), (item: string, index: number) => {
Text(item)
.fontSize(14)
})
}.width(100)
.backgroundColor(Color.Pink)
Text('多行效果')
Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceBetween }) {
ForEach(this.str_2.split(''), (item: string, index: number) => {
Text(item)
.fontSize(14)
})
}.width(100)
.backgroundColor(Color.Pink)
}
.height('100%')
.width('100%')
}
}
网友评论