这里有搞鸿蒙开发的兄弟吗？遇到一个布局问题

[chillwind]

这里有搞鸿蒙开发的兄弟吗？今天遇到一个问题，搞了半天也没搞定。需求很简单就是让左边的竖线跟随整个 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 })

[Nc]

试试下面的

```
@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 })
}
}
```

[chillwind]

不行，只要高度设置了.height('100%')，这个 Row 就会占据整个屏幕剩余的区域

[lulaolu]

看下 ChatGPT 的回答呢： https://chatgpt.com/share/67a6034c-07b8-8011-9d1a-2b56fb06615a

[heyjei]

这布局的代码风格，不看晕过去吗

[Helsing]

Compose 有固有特性测量，可以找找 Ark UI 有没有

[lisongeee]

如果是 compose 就很简单，父布局设置 .height(IntrinsicSize.Min)，子布局 .fillMaxHeight() 就完了

[Yuanlaoer]

这玩意儿的风格，之前除了 SwiftUI ，还有哪个语言或者框架用么？

[ZGame]

@Yuanlaoer flutter ,

[qwwuyu]

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

[cadillac]

现在大模型对鸿蒙的 ArkUI 支持的怎么样了

[iOCZS]

arkui 怎么配跟 SwiftUI 比较😂

[Yuanlaoer]

@ZGame 我只是说从 App 开发者的角度来看：
对比了一下 flutter ，感觉区别还是挺大的。你去看看 SwiftUI 的代码，你再看看鸿蒙的 ArkUI ，你自己感受一下。

[Danmen123]

@Yuanlaoer jetpack compose,android 主推的 UI 框架

[ZGame]

@Yuanlaoer #12 我只有简单用过 flutter 现在是在写 react 反正都是抄 react 的嘛

[Yuanlaoer]

@Danmen123 多谢，了解了。看 release 时间，差不多也是那段时期的

[Yuanlaoer]

@ZGame 您这个回复就跟吃意大利面一定要拌 37 号水泥差不多

[ZGame]

@Yuanlaoer #16 倒也不是吧 我记得原来写 flutter 的时候还是挺简单的。react 更函数式一点 这个看着像用了类的装饰器的那种链式写法。

[Yuanlaoer]

@ZGame 嗨，你要是从这个角度说，很多前端语言/框架都过不了几年就有这种情况。你这跑题跑的有点儿远了

[nicevar]

@Yuanlaoer 现在客户端开发基本上就是这个风格的，安卓的 Compose UI 基本上跟 ArkUI 一条裤子的，flutter 也大差不差。

[ZGame]

@Yuanlaoer #18 所以大同小异, 路径依赖就是 react->flutter->swiftUI,jetpack compose ,我猜测华为的不管是范式还是 ,Ui 渲染那块应该都有模仿 react flutter 的痕迹和实现吧。