添加标签组件并更新导航栏Add按钮样式
- 新增可复用的`TabItem`和`TabSpacer`组件,用于实现标签页切换效果。
- 在消息列表和AI Agent页面中,使用新的`TabItem`和`TabSpacer`组件替换原有的标签页实现,简化代码并统一风格。
- 更新底部导航栏Add按钮的图标和交互行为:
- 使用新的`ic_nav_add.xml`图标。
- Add按钮只显示图标,不显示文字标签。
- Add按钮图标放大。
- 在`Colors.kt`中为`AppThemeData`添加新的颜色属性,以支持新标签组件的自定义主题。
This commit is contained in:
@@ -0,0 +1,56 @@
|
||||
package com.aiosman.ravenow.ui.composables
|
||||
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.Spacer
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.width
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.sp
|
||||
import com.aiosman.ravenow.LocalAppTheme
|
||||
import com.aiosman.ravenow.ui.modifiers.noRippleClickable
|
||||
|
||||
/**
|
||||
* 可复用的标签页组件
|
||||
*/
|
||||
@Composable
|
||||
fun TabItem(
|
||||
text: String,
|
||||
isSelected: Boolean,
|
||||
onClick: () -> Unit,
|
||||
modifier: Modifier = Modifier
|
||||
) {
|
||||
val AppColors = LocalAppTheme.current
|
||||
|
||||
Column(
|
||||
modifier = modifier
|
||||
.noRippleClickable { onClick() },
|
||||
verticalArrangement = Arrangement.Center,
|
||||
horizontalAlignment = Alignment.CenterHorizontally
|
||||
) {
|
||||
Text(
|
||||
text = text,
|
||||
fontSize = 14.sp,
|
||||
color = if (isSelected) AppColors.tabSelectedText else AppColors.tabUnselectedText,
|
||||
modifier = Modifier
|
||||
.clip(RoundedCornerShape(8.dp))
|
||||
.background(if (isSelected) AppColors.tabSelectedBackground else AppColors.tabUnselectedBackground)
|
||||
.padding(horizontal = 11.dp, vertical = 4.dp)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 标签页之间的间隔组件
|
||||
*/
|
||||
@Composable
|
||||
fun TabSpacer() {
|
||||
Spacer(modifier = Modifier.width(8.dp))
|
||||
}
|
||||
Reference in New Issue
Block a user