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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Android Studio

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

鸿蒙开发

布局问题

row

18 条回复 • 2025-02-08 16:59:26 +08:00

1 天前

试试下面的

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

1 天前

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

lulaolu

1 天前

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

heyjei

22 小时 52 分钟前

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

Helsing

21 小时 45 分钟前 via iPhone

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

lisongeee

21 小时 27 分钟前

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

Yuanlaoer

20 小时 41 分钟前

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

ZGame

13 小时 6 分钟前

@Yuanlaoer flutter ,

qwwuyu

13 小时 0 分钟前

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

12 小时 26 分钟前

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

iOCZS

10 小时 59 分钟前

arkui 怎么配跟 SwiftUI 比较😂

Yuanlaoer

10 小时 57 分钟前

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

Danmen123

10 小时 17 分钟前

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

ZGame

9 小时 57 分钟前

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

Yuanlaoer

5 小时 40 分钟前

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

Yuanlaoer

5 小时 40 分钟前

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

ZGame

5 小时 17 分钟前

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

Yuanlaoer

4 小时 44 分钟前

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