feat: sidebar animate
This commit is contained in:
parent
2cf7798754
commit
5c215c6797
|
@ -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"
|
||||
}
|
||||
}
|
||||
],
|
||||
|
|
|
@ -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 {}
|
||||
}
|
||||
|
||||
|
|
|
@ -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)
|
||||
]
|
||||
)
|
||||
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
]
|
||||
)
|
||||
|
|
|
@ -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() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
|
|
@ -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))
|
||||
}
|
||||
|
|
|
@ -23,6 +23,6 @@ func getSource(index: Int): String {
|
|||
if (index % 2 == 0) {
|
||||
'ME'
|
||||
} else {
|
||||
'YOU'
|
||||
'SYS'
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
41
entry/src/main/cangjie/src/store/AppUIStore.cj
Normal file
41
entry/src/main/cangjie/src/store/AppUIStore.cj
Normal 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()
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user