这里有搞鸿蒙开发的兄弟吗?今天遇到一个问题,搞了半天也没搞定。需求很简单就是让左边的竖线跟随整个 Row 的高度变化,整个 Row 的高度不定,后面的文本可能会换行。 Row() { // Vertical line decoration Row() .width(3) .height('100%') .backgroundColor('#DDDDDD')
Column() { Row() { Text("Test1111") .fontSize(14) .fontWeight(FontWeight.Lighter) .fontStyle(FontStyle.Italic) .foregroundColor('#DDDDDD') .flexGrow(1) Button() { Text("button") .width(30) .height(30) } .width(30) .height(30) .backgroundColor(Color.Transparent) .foregroundColor('#DDDDDD') } .width('100%') .alignItems(VerticalAlign.Top) Text("long text long text long text long text long text ") .fontSize(14) .fontWeight(FontWeight.Lighter) .foregroundColor('#DDDDDD') .width('100%') .margin({ top: 2 }) } .margin({ left: 7 }) .layoutWeight(1) } .alignItems(VerticalAlign.Top) .width('100%') .margin({ top: 10 })
![]() | 1 Ao04Ip922e2kXx7H 244 天前 试试下面的 ``` @Component export struct DecoratedRow { build() { Row() { // Left decorative line that will stretch full height Row() { Row() .width(3) .backgroundColor('#DDDDDD') .height('100%') } .height('100%') .margin({ right: 4 }) // Main content column Column() { Row() { Text("Test1111") .fontSize(14) .fontWeight(FontWeight.Lighter) .fontStyle(FontStyle.Italic) .foregroundColor('#DDDDDD') .flexGrow(1) Button() { Text("button") .width(30) .height(30) } .width(30) .height(30) .backgroundColor(Color.Transparent) .foregroundColor('#DDDDDD') } .width('100%') .alignItems(VerticalAlign.Top) Text("long text long text long text long text long text ") .fontSize(14) .fontWeight(FontWeight.Lighter) .foregroundColor('#DDDDDD') .width('100%') .margin({ top: 2 }) } .margin({ left: 7 }) .layoutWeight(1) } .alignItems(VerticalAlign.Top) .width('100%') .margin({ top: 10 }) } } ``` |
![]() | 2 chillwind OP 不行,只要高度设置了.height('100%'),这个 Row 就会占据整个屏幕剩余的区域 |
![]() | 3 lulaolu 244 天前 看下 ChatGPT 的回答呢: https://chatgpt.com/share/67a6034c-07b8-8011-9d1a-2b56fb06615a |
![]() | 4 heyjei 244 天前 这布局的代码风格,不看晕过去吗 |
![]() | 5 Helsing 244 天前 via iPhone |
![]() | 6 lisongeee 244 天前 如果是 compose 就很简单,父布局设置 .height(IntrinsicSize.Min),子布局 .fillMaxHeight() 就完了 |
7 Yuanlaoer 244 天前 这玩意儿的风格,之前除了 SwiftUI ,还有哪个语言或者框架用么? |
![]() | 9 qwwuyu 244 天前 RelativeContainer() { Column() { Row() { Text("Test1111") .fontSize(14) .fontWeight(FontWeight.Lighter) .fontStyle(FontStyle.Italic) .foregroundColor('#DDDDDD') .flexGrow(1) Button() { Text("button") .width(30) .height(30) } .width(30) .height(30) .backgroundColor(Color.Transparent) .foregroundColor('#DDDDDD') } .width('100%') .alignItems(VerticalAlign.Top) Text("long text long text long text long text long text long text long text long text long text long text") .fontSize(14) .fontWeight(FontWeight.Lighter) .foregroundColor('#DDDDDD') .width('100%') .margin({ top: 2 }) } .id('viewRight') .backgroundColor(0xff0000) .margin({ left: 10 }) .alignRules({ left: { anchor: '__container__', align: HorizontalAlign.Start }, right: { anchor: '__container__', align: HorizontalAlign.End }, }) Row() .id('viewLine') .width(3) .backgroundColor(0x00ff00) .alignRules({ top: { anchor: 'viewRight', align: VerticalAlign.Top }, bottom: { anchor: 'viewRight', align: VerticalAlign.Bottom }, }) } .size({ width: '100%', height: 'auto' }) .margin({ top: 10 }) .backgroundColor(0x0000ff) //RelativeContainer 可以做到,但是稍微用错容易出不明所以的 BUG |
![]() | 10 cadillac 243 天前 现在大模型对鸿蒙的 ArkUI 支持的怎么样了 |
11 iOCZS 243 天前 arkui 怎么配跟 SwiftUI 比较 |