feat: sidebar animate

This commit is contained in:
clz 2024-09-19 23:13:15 +08:00
parent 2cf7798754
commit 5c215c6797
12 changed files with 139 additions and 26 deletions

View File

@ -5,13 +5,13 @@
"name": "default",
"type": "HarmonyOS",
"material": {
"certpath": "C:\\Users\\wps\\.ohos\\config\\default_himi_ZikZBgBxljB_K_Bxk-D2cAAnn7PtvbqmLsGmCt8Tywc=.cer",
"storePassword": "0000001B9A5987C8C2ED4361B7927D584652F717FF7936EC3310D0B9BCEEA9B1E3485C8480FF92C40CA86E",
"certpath": "C:\\Users\\clz\\.ohos\\config\\default_himi_ZikZBgBxljB_K_Bxk-D2cAAnn7PtvbqmLsGmCt8Tywc=.cer",
"storePassword": "0000001A03384DEB01F504B42FD70CBF974256D4CA32F4F9D4459DB3D7DCD1561D17D850D42B2FB741BC",
"keyAlias": "debugKey",
"keyPassword": "0000001BC10C705923EBF5BFF9E770159DFBE2DD5E92BD7DCC5F78CCF2629A20BA2BD3177C275B83ADB93F",
"profile": "C:\\Users\\wps\\.ohos\\config\\default_himi_ZikZBgBxljB_K_Bxk-D2cAAnn7PtvbqmLsGmCt8Tywc=.p7b",
"keyPassword": "0000001A59E9939B476BC030721C982C8E71A2DA937FB7318CFD06F3EC1677A0D48D45737FFD392F4C6B",
"profile": "C:\\Users\\clz\\.ohos\\config\\default_himi_ZikZBgBxljB_K_Bxk-D2cAAnn7PtvbqmLsGmCt8Tywc=.p7b",
"signAlg": "SHA256withECDSA",
"storeFile": "C:\\Users\\wps\\.ohos\\config\\default_himi_ZikZBgBxljB_K_Bxk-D2cAAnn7PtvbqmLsGmCt8Tywc=.p12"
"storeFile": "C:\\Users\\clz\\.ohos\\config\\default_himi_ZikZBgBxljB_K_Bxk-D2cAAnn7PtvbqmLsGmCt8Tywc=.p12"
}
}
],

View File

@ -27,6 +27,8 @@ public class ChatMessage {
ChatMessageMe(message: this.message)
} else if (let EChatSource.YOU <- this.source) {
ChatMessageYou(message: this.message)
} else if (let EChatSource.SYS <- this.source) {
ChatMessageSys(message: this.message)
} else {}
}

View File

@ -19,9 +19,9 @@ public class ChatMessageMe {
var radiusMap: HashMap<String, Length> = HashMap<String, Length>(
[
("topLeft", 12.vp),
("topRight", 12.vp),
("topRight", 0.vp),
("bottomLeft", 12.vp),
("bottomRight", 0.vp)
("bottomRight", 12.vp)
]
)

View File

@ -11,9 +11,11 @@ import ohos.base.*
@Component
public class ChatMessageSys {
let maxWidth = 100.percent
let fontColor: Color = Color.BLACK
let bgColor: Color = Color.WHITE
let orient: FlexAlign = FlexAlign.Start
let orient2: HorizontalAlign = HorizontalAlign.Start
@Prop
var message: String
@ -21,24 +23,40 @@ public class ChatMessageSys {
@State
var radiusMap: HashMap<String, Length> = HashMap<String, Length>(
[
("topLeft", 12.vp),
("topLeft", 0.vp),
("topRight", 12.vp),
("bottomLeft", 0.vp),
("bottomLeft", 12.vp),
("bottomRight", 12.vp)
]
)
func build() {
Row() {
Row() {
Text(message).fontColor(this.fontColor).backgroundColor(this.bgColor).padding(top: 8, right: 16,
bottom: 8, left: 16).borderRadius(
Column(8) {
Row(8) {
Blank() // avatar
.width(24.vp)
.height(24.vp)
.borderRadius(12.vp)
.backgroundColor(Color.GRAY)
// name
Text("Himi")
}
Row {
Text(message)
.fontColor(this.fontColor)
.backgroundColor(this.bgColor)
.padding(top: 8, right: 16, bottom: 8, left: 16)
.borderRadius(
topLeft: this.radiusMap['topLeft'],
topRight: this.radiusMap['topRight'],
bottomLeft: this.radiusMap['bottomLeft'],
bottomRight: this.radiusMap['bottomRight'],
)
}.width(60.percent).justifyContent(this.orient)
}.width(100.percent).justifyContent(this.orient)
).width(this.maxWidth)
}.width(this.maxWidth).justifyContent(this.orient)
}.width(100.percent).alignItems(this.orient2)
}
}

View File

@ -21,9 +21,9 @@ public class ChatMessageYou {
@State
var radiusMap: HashMap<String, Length> = HashMap<String, Length>(
[
("topLeft", 12.vp),
("topLeft", 0.vp),
("topRight", 12.vp),
("bottomLeft", 0.vp),
("bottomLeft", 12.vp),
("bottomRight", 12.vp)
]
)

View File

@ -0,0 +1,19 @@
/**
* Created on 2024/9/19
*/
package ohos_app_cangjie_entry.components.chat.components
import std.collection.*
import ohos.component.*
import ohos.state_macro_manage.*
import ohos.state_manage.*
import ohos.base.*
@Component
public class ToBottom {
func build() {
Row() {
}
}
}

View File

@ -19,19 +19,19 @@ import ohos_app_cangjie_entry.view_model.ChatListControl
public class HomeMain {
let TAG: String = "HomeMain"
@State
var mockData: ArrayList<ChatData> = ChatStore().use()
var chatDataSource: ArrayList<ChatData> = ChatStore().use()
let chatListController = ChatListControl()
protected func aboutToAppear(): Unit {
Logger(TAG).info("About to appear.")
ChatStore().register(this.TAG) {
this.mockData = ChatStore().use()
this.chatDataSource = ChatStore().use()
}
}
func build() {
Column {
ChatList(datasource: this.mockData)
ChatList(datasource: this.chatDataSource)
}.width(100.percent).height(100.percent).padding(right: 8.vp, left: 8.vp)
}
}

View File

@ -7,11 +7,19 @@ internal import ohos.base.*
internal import ohos.component.*
internal import ohos.state_manage.*
import ohos.state_macro_manage.*
import ohos_app_cangjie_entry.store.*
@Component
public class HomeTitle {
@State
var appUIState: _AppUIStore = AppUIStore()
func build() {
Row {
Row() {
Button('open sidebar')
.onClick {
=> this.appUIState.openSidebar()
}
Text("Home Title")
}.width(100.percent)
}

View File

@ -5,6 +5,7 @@ internal import ohos.component.*
internal import ohos.state_manage.*
import ohos.state_macro_manage.*
import ohos_app_cangjie_entry.pages.*
import ohos_app_cangjie_entry.store.*
@Entry
@Component
@ -13,11 +14,28 @@ class MyView {
@State
var message: String = "Hello Cangjie"
protected func aboutToAppear() {
@State
var appUIState: _AppUIStore = AppUIStore()
protected override func aboutToAppear() {
}
protected override func onBackPress() {
if (appUIState.sidebarState()) {
appUIState.closeSidebar()
return true
}
return false
}
func build() {
Row {
Stack {
if (this.appUIState.sidebarState()) {
Row {
SidePage()
}.height(100.percent).width(100.percent).backgroundColor(@r(app.color.bg_01)).zIndex(24).transition(
TransitionEffect.SLIDE.animation(AnimateParam(duration: 300, curve: Curve.Linear)))
}
HomePage()
}.height(100.percent).width(100.percent).backgroundColor(@r(app.color.bg_01))
}

View File

@ -23,6 +23,6 @@ func getSource(index: Int): String {
if (index % 2 == 0) {
'ME'
} else {
'YOU'
'SYS'
}
}

View File

@ -7,13 +7,20 @@ internal import ohos.base.*
internal import ohos.component.*
internal import ohos.state_manage.*
import ohos.state_macro_manage.*
import ohos_app_cangjie_entry.store.*
@Component
public class SidePage {
private let TAG: String = "SidePage"
@State
var appUIState: _AppUIStore = AppUIStore()
protected func aboutToAppear() {
}
func build() {
Row()
Row() {
Text('Sidebar')
}
.width(100.percent)
.height(100.percent)
}
}

View File

@ -0,0 +1,41 @@
/**
* Created on 2024/9/19
*/
package ohos_app_cangjie_entry.store
import std.collection.*
import ohos.component.*
import ohos.state_macro_manage.*
import ohos.state_manage.*
import ohos.base.*
import ohos_app_cangjie_entry.utils.Logger
@Observed
public class _AppUIStore {
private let TAG = "AppUIStore"
@Publish
public var isSidebarOpen: Bool = false
public func sidebarState() {
return this.isSidebarOpen
}
public func openSidebar() {
Logger(TAG).info("open sidebar")
this.isSidebarOpen = true
}
public func closeSidebar() {
this.isSidebarOpen = false
}
}
var AppUIStoreInstance = Option<_AppUIStore>.None
public func AppUIStore(): _AppUIStore {
if (let Some(value) <- AppUIStoreInstance) {
value
} else {
AppUIStoreInstance = Option<_AppUIStore>.Some(_AppUIStore())
AppUIStoreInstance.getOrThrow()
}
}