Skip to content

Commit d443baa

Browse files
Lfan-keLfan-ke
committed
feat(core/views): add TableView, TableRowView, TableCellView native DSL.
Signed-off-by: 林晨 (Leo Cheng) <leo-cheng@vip.qq.com> style(core/views): remove separator comments and add isRenderView note. Signed-off-by: 林晨 (Leo Cheng) <leo-cheng@vip.qq.com>
1 parent 0eadaed commit d443baa

3 files changed

Lines changed: 345 additions & 1 deletion

File tree

‎core/src/commonMain/kotlin/com/tencent/kuikly/core/base/ViewConst.kt‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,4 +59,7 @@ object ViewConst {
5959
const val TYPE_VIDEO_VIEW = "KRVideoView"
6060
const val TYPE_MODAL_VIEW = "KRModalView"
6161

62-
}
62+
const val TYPE_TABLE = "KRTableView"
63+
const val TYPE_TABLE_ROW = "KRTableRowView"
64+
const val TYPE_TABLE_CELL = "KRTableCellView"
65+
}

‎core/src/commonMain/kotlin/com/tencent/kuikly/core/views/TableView.kt‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
/*
2+
* Tencent is pleased to support the open source community by making KuiklyUI
3+
* available.
4+
* Copyright (C) 2025 Tencent. All rights reserved.
5+
* Licensed under the License of KuiklyUI;
6+
* you may not use this file except in compliance with the License.
7+
* You may obtain a copy of the License at
8+
* https://github.com/Tencent-TDS/KuiklyUI/blob/main/LICENSE
9+
* Unless required by applicable law or agreed to in writing, software
10+
* distributed under the License is distributed on an "AS IS" BASIS,
11+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
* See the License for the specific language governing permissions and
13+
* limitations under the License.
14+
*/
15+
16+
package com.tencent.kuikly.core.views
17+
18+
import com.tencent.kuikly.core.base.Color
19+
import com.tencent.kuikly.core.base.ViewConst
20+
import com.tencent.kuikly.core.base.ViewContainer
21+
import com.tencent.kuikly.core.base.toInt
22+
import com.tencent.kuikly.core.views.internal.GroupAttr
23+
import com.tencent.kuikly.core.views.internal.GroupEvent
24+
import com.tencent.kuikly.core.views.internal.GroupView
25+
26+
fun ViewContainer<*, *>.Table(init: TableView.() -> Unit) {
27+
addChild(TableView(), init)
28+
}
29+
30+
fun ViewContainer<*, *>.TableRow(init: TableRowView.() -> Unit) {
31+
addChild(TableRowView(), init)
32+
}
33+
34+
fun ViewContainer<*, *>.TableCell(init: TableCellView.() -> Unit) {
35+
addChild(TableCellView(), init)
36+
}
37+
38+
open class TableView : GroupView<TableAttr, TableEvent>() {
39+
40+
override fun createAttr(): TableAttr = TableAttr()
41+
42+
override fun createEvent(): TableEvent = TableEvent()
43+
44+
override fun viewName(): String = ViewConst.TYPE_TABLE
45+
46+
// 原生表格视图（KRTableView）不参与 flat-layer 优化，始终持有独立 Native 视图
47+
override fun isRenderView(): Boolean = true
48+
49+
fun TableRow(init: TableRowView.() -> Unit) {
50+
addChild(TableRowView(), init)
51+
}
52+
}
53+
54+
open class TableAttr : GroupAttr() {
55+
56+
fun separatorColor(color: Color) {
57+
"separatorColor" with color.hexColor
58+
}
59+
60+
fun separatorHeight(height: Float) {
61+
"separatorHeight" with height
62+
}
63+
64+
fun allowsMultipleSelection(allow: Boolean) {
65+
"allowsMultipleSelection" with allow.toInt()
66+
}
67+
68+
fun allowsSelection(allow: Boolean) {
69+
"allowsSelection" with allow.toInt()
70+
}
71+
}
72+
73+
open class TableEvent : GroupEvent() {
74+
75+
fun rowClick(handler: (index: Int) -> Unit) {
76+
register("rowClick") { data ->
77+
val index = (data as? Number)?.toInt() ?: 0
78+
handler(index)
79+
}
80+
}
81+
82+
fun rowLongPress(handler: (index: Int) -> Unit) {
83+
register("rowLongPress") { data ->
84+
val index = (data as? Number)?.toInt() ?: 0
85+
handler(index)
86+
}
87+
}
88+
}
89+
90+
open class TableRowView : GroupView<TableRowAttr, TableRowEvent>() {
91+
92+
override fun createAttr(): TableRowAttr = TableRowAttr()
93+
94+
override fun createEvent(): TableRowEvent = TableRowEvent()
95+
96+
override fun viewName(): String = ViewConst.TYPE_TABLE_ROW
97+
98+
override fun isRenderView(): Boolean = true
99+
100+
fun TableCell(init: TableCellView.() -> Unit) {
101+
addChild(TableCellView(), init)
102+
}
103+
}
104+
105+
open class TableRowAttr : GroupAttr() {
106+
107+
fun rowHeight(height: Float) {
108+
"rowHeight" with height
109+
}
110+
111+
fun selectable(selectable: Boolean) {
112+
"selectable" with selectable.toInt()
113+
}
114+
}
115+
116+
open class TableRowEvent : GroupEvent() {
117+
118+
fun selected(handler: () -> Unit) {
119+
register("selected") { handler() }
120+
}
121+
122+
fun deselected(handler: () -> Unit) {
123+
register("deselected") { handler() }
124+
}
125+
}
126+
127+
open class TableCellView : GroupView<TableCellAttr, TableCellEvent>() {
128+
129+
override fun createAttr(): TableCellAttr = TableCellAttr()
130+
131+
override fun createEvent(): TableCellEvent = TableCellEvent()
132+
133+
override fun viewName(): String = ViewConst.TYPE_TABLE_CELL
134+
135+
override fun isRenderView(): Boolean = true
136+
}
137+
138+
open class TableCellAttr : GroupAttr() {
139+
140+
fun columnSpan(span: Int) {
141+
"columnSpan" with span
142+
}
143+
}
144+
145+
open class TableCellEvent : GroupEvent()

‎demo/src/commonMain/kotlin/com/tencent/kuikly/demo/pages/demo/TableViewDemoPage.kt‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
/*
2+
* Tencent is pleased to support the open source community by making KuiklyUI
3+
* available.
4+
* Copyright (C) 2025 Tencent. All rights reserved.
5+
* Licensed under the License of KuiklyUI;
6+
* you may not use this file except in compliance with the License.
7+
* You may obtain a copy of the License at
8+
* https://github.com/Tencent-TDS/KuiklyUI/blob/main/LICENSE
9+
* Unless required by applicable law or agreed to in writing, software
10+
* distributed under the License is distributed on an "AS IS" BASIS,
11+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
* See the License for the specific language governing permissions and
13+
* limitations under the License.
14+
*/
15+
16+
package com.tencent.kuikly.demo.pages.demo
17+
18+
import com.tencent.kuikly.core.annotations.Page
19+
import com.tencent.kuikly.core.base.Color
20+
import com.tencent.kuikly.core.base.ViewBuilder
21+
import com.tencent.kuikly.core.log.KLog
22+
import com.tencent.kuikly.core.views.Table
23+
import com.tencent.kuikly.core.views.TableCell
24+
import com.tencent.kuikly.core.views.TableRow
25+
import com.tencent.kuikly.core.views.Text
26+
import com.tencent.kuikly.core.views.View
27+
import com.tencent.kuikly.demo.pages.base.BasePager
28+
import com.tencent.kuikly.demo.pages.demo.base.NavBar
29+
30+
private data class TableItem(val name: String, val score: String, val grade: String)
31+
32+
@Page("TableViewDemoPage")
33+
internal class TableViewDemoPage : BasePager() {
34+
35+
private val items = listOf(
36+
TableItem("Alice", "95", "A"),
37+
TableItem("Bob", "82", "B"),
38+
TableItem("Carol", "78", "C+"),
39+
TableItem("Dave", "91", "A-"),
40+
TableItem("Eve", "67", "D+"),
41+
TableItem("Frank", "88", "B+"),
42+
TableItem("Grace", "74", "C"),
43+
TableItem("Henry", "99", "A+"),
44+
)
45+
46+
override fun body(): ViewBuilder {
47+
val ctx = this
48+
return {
49+
NavBar {
50+
attr {
51+
title = "TableView Demo"
52+
}
53+
}
54+
Table {
55+
attr {
56+
flex(1f)
57+
separatorColor(Color(0xFFE0E0E0L))
58+
separatorHeight(0.5f)
59+
allowsSelection(true)
60+
}
61+
event {
62+
rowClick { index ->
63+
KLog.i("TableViewDemo", "row clicked: $index")
64+
}
65+
}
66+
TableRow {
67+
attr {
68+
rowHeight(44f)
69+
backgroundColor(Color(0xFFF5F5F5L))
70+
flexDirectionRow()
71+
}
72+
TableCell {
73+
attr {
74+
flex(2f)
75+
justifyContentCenter()
76+
paddingLeft(16f)
77+
}
78+
Text {
79+
attr {
80+
fontSize(14f)
81+
color(Color(0xFF333333L))
82+
fontWeight700()
83+
text("Name")
84+
}
85+
}
86+
}
87+
TableCell {
88+
attr {
89+
flex(1f)
90+
justifyContentCenter()
91+
alignItemsCenter()
92+
}
93+
Text {
94+
attr {
95+
fontSize(14f)
96+
color(Color(0xFF333333L))
97+
fontWeight700()
98+
text("Score")
99+
}
100+
}
101+
}
102+
TableCell {
103+
attr {
104+
flex(1f)
105+
justifyContentCenter()
106+
alignItemsCenter()
107+
}
108+
Text {
109+
attr {
110+
fontSize(14f)
111+
color(Color(0xFF333333L))
112+
fontWeight700()
113+
text("Grade")
114+
}
115+
}
116+
}
117+
}
118+
ctx.items.forEachIndexed { index, item ->
119+
TableRow {
120+
attr {
121+
rowHeight(48f)
122+
flexDirectionRow()
123+
backgroundColor(
124+
if (index % 2 == 0) Color.WHITE else Color(0xFFFAFAFAL)
125+
)
126+
}
127+
event {
128+
click {
129+
KLog.i("TableViewDemo", "clicked item: ${item.name}")
130+
}
131+
}
132+
TableCell {
133+
attr {
134+
flex(2f)
135+
justifyContentCenter()
136+
paddingLeft(16f)
137+
}
138+
Text {
139+
attr {
140+
fontSize(14f)
141+
color(Color(0xFF212121L))
142+
text(item.name)
143+
}
144+
}
145+
}
146+
TableCell {
147+
attr {
148+
flex(1f)
149+
justifyContentCenter()
150+
alignItemsCenter()
151+
}
152+
Text {
153+
attr {
154+
fontSize(14f)
155+
color(Color(0xFF212121L))
156+
text(item.score)
157+
}
158+
}
159+
}
160+
TableCell {
161+
attr {
162+
flex(1f)
163+
justifyContentCenter()
164+
alignItemsCenter()
165+
}
166+
View {
167+
attr {
168+
paddingLeft(8f)
169+
paddingRight(8f)
170+
paddingTop(2f)
171+
paddingBottom(2f)
172+
borderRadius(4f)
173+
backgroundColor(gradeColor(item.grade))
174+
}
175+
Text {
176+
attr {
177+
fontSize(12f)
178+
color(Color.WHITE)
179+
text(item.grade)
180+
}
181+
}
182+
}
183+
}
184+
}
185+
}
186+
}
187+
}
188+
}
189+
190+
private fun gradeColor(grade: String): Color = when {
191+
grade.startsWith("A") -> Color(0xFF4CAF50L)
192+
grade.startsWith("B") -> Color(0xFF2196F3L)
193+
grade.startsWith("C") -> Color(0xFFFF9800L)
194+
else -> Color(0xFFF44336L)
195+
}
196+
}

0 commit comments

Comments
 (0)