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

5 天前
 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 })
2653 次点击
所在节点    Android
20 条回复
Nc
5 天前
试试下面的

```
@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
5 天前
不行,只要高度设置了.height('100%'),这个 Row 就会占据整个屏幕剩余的区域
lulaolu
5 天前
heyjei
5 天前
这布局的代码风格,不看晕过去吗
Helsing
5 天前
Compose 有固有特性测量,可以找找 Ark UI 有没有
lisongeee
5 天前
如果是 compose 就很简单,父布局设置 .height(IntrinsicSize.Min),子布局 .fillMaxHeight() 就完了
Yuanlaoer
5 天前
这玩意儿的风格,之前除了 SwiftUI ,还有哪个语言或者框架用么?
ZGame
5 天前
@Yuanlaoer flutter ,
qwwuyu
5 天前
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
5 天前
现在大模型对鸿蒙的 ArkUI 支持的怎么样了
iOCZS
5 天前
arkui 怎么配跟 SwiftUI 比较😂
Yuanlaoer
5 天前
@ZGame 我只是说从 App 开发者的角度来看:
对比了一下 flutter ,感觉区别还是挺大的。你去看看 SwiftUI 的代码,你再看看鸿蒙的 ArkUI ,你自己感受一下。
Danmen123
5 天前
@Yuanlaoer jetpack compose,android 主推的 UI 框架
ZGame
5 天前
@Yuanlaoer #12 我只有简单用过 flutter 现在是在写 react 反正都是抄 react 的嘛
Yuanlaoer
5 天前
@Danmen123 多谢,了解了。看 release 时间,差不多也是那段时期的
Yuanlaoer
5 天前
@ZGame 您这个回复就跟吃意大利面一定要拌 37 号水泥差不多
ZGame
5 天前
@Yuanlaoer #16 倒也不是吧 我记得原来写 flutter 的时候还是挺简单的。react 更函数式一点 这个看着像用了类的装饰器的那种链式写法。
Yuanlaoer
4 天前
@ZGame 嗨,你要是从这个角度说,很多前端语言/框架都过不了几年就有这种情况。你这跑题跑的有点儿远了
nicevar
4 天前
@Yuanlaoer 现在客户端开发基本上就是这个风格的,安卓的 Compose UI 基本上跟 ArkUI 一条裤子的,flutter 也大差不差。
ZGame
3 天前
@Yuanlaoer #18 所以大同小异, 路径依赖就是 react->flutter->swiftUI,jetpack compose ,我猜测华为的不管是范式还是 ,Ui 渲染那块应该都有模仿 react flutter 的痕迹和实现吧。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://tanronggui.xyz/t/1109716

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX