腾讯云即时通信IMFlutter_AI解决方案_同尘科技
功能描述
TUIKit 从 v1.1.0 版本开始 ,主题颜色能力得到大幅度完善。说明TUIKit 默认提供颜色配置,您可以直接使用,无需任何配置。但同时,您也可以很方便的自定义,TUIKit 界面中,各处众多颜色配置。
自定义方式
步骤一:定义 TUIKit 颜色对象
在此对象中,您可以定义 TUIKit 界面中,各处的颜色配置。请直接实例化一个 TUITheme()
对象。并修改里面的各个参数,以覆盖默认值,使用自定义颜色。该对象构造函数,可配置的颜色有如下:
// 应用主色 // Primary Color For The App final Color? primaryColor;
// 应用次色 // Secondary Color For The App final Color? secondaryColor;
// 提示颜色,用于次级操作或提示 // Info Color, Used For Secondary Action Or Info final Color? infoColor;
// 浅背景颜色,比主背景颜色浅,用于填充缝隙或阴影 // Weak Background Color, Lighter Than Main Background, Used For Marginal Space Or Shadowy Space final Color? weakBackgroundColor;
// 宽屏幕:浅白背景颜色,比浅背景颜色浅 // Weak Background Color, Lighter Than Main Background, Used For Marginal Space Or Shadowy Space final Color? wideBackgroundColor;
// 浅分割线颜色,用于分割线或边框 // Weak Divider Color, Used For Divider Or Border final Color? weakDividerColor;
// 浅字色 // Weak Text Color final Color? weakTextColor;
// 深字色 // Dark Text Color final Color? darkTextColor;
// 浅主色,用于AppBar或Panels // Light Primary Color, Used For AppBar Or Several Panels final Color? lightPrimaryColor;
// 字色 // TextColor final Color? textColor;
// 警示色,用于危险操作 // Caution Color, Used For Warning Actions final Color? cautionColor;
// 群主标识色 // Group Owner Identification Color final Color? ownerColor;
// 群管理员标识色 // Group Admin Identification Color final Color? adminColor;
// 白色 // white final Color? white;
// 黑色 // black final Color? black;
// 输入框填充色 // input fill color final Color? inputFillColor;
// 灰色文本 // grey text color final Color? textgrey;
/// 新版本颜色从这里开始 /// Appbar 背景颜色 final Color? appbarBgColor; /// Appbar 文字颜色 final Color? appbarTextColor; /// 消息列表多选面板背景颜色 final Color? selectPanelBgColor; /// 消息列表多选面板文字及icon颜色 final Color? selectPanelTextIconColor; /// /// 会话列表背景颜色 final Color? conversationItemBgColor;
/// 会话列表边框颜色 final Color? conversationItemBorderColor;
/// 会话列表选中背景颜色 final Color? conversationItemActiveBgColor;
/// 会话列表置顶背景颜色 final Color? conversationItemPinedBgColor;
/// 会话列表Title字体颜色 final Color? conversationItemTitleTextColor;
/// 会话列表LastMessage字体颜色 final Color? conversationItemLastMessageTextColor;
/// 会话列表Time字体颜色 final Color? conversationItemTitmeTextColor;
/// 会话列表用户在线状态背景色 final Color? conversationItemOnlineStatusBgColor;
/// 会话列表用户离线状态背景色 final Color? conversationItemOfflineStatusBgColor;
/// 会话列表未读数背景颜色 final Color? conversationItemUnreadCountBgColor;
/// 会话列表未读数字体颜色 final Color? conversationItemUnreadCountTextColor;
/// 会话列表草稿字体颜色 final Color? conversationItemDraftTextColor;
/// 会话列表收到消息不提醒Icon颜色 final Color? conversationItemNoNotificationIconColor;
/// 会话列表侧滑按钮字体颜色 final Color? conversationItemSliderTextColor;
/// 会话列表侧滑按钮Clear背景颜色 final Color? conversationItemSliderClearBgColor;
/// 会话列表侧滑按钮Pin背景颜色 final Color? conversationItemSliderPinBgColor;
/// 会话列表侧滑按钮Delete背景颜色 final Color? conversationItemSliderDeleteBgColor;
/// 会话列表宽屏模式选中时背景颜色 final Color? conversationItemChooseBgColor;
/// 聊天页背景颜色 final Color? chatBgColor;
/// 聊天页中时间戳分隔符字体颜色 final Color? chatTimeDividerTextColor;
/// 聊天页导航栏背景颜色 final Color? chatHeaderBgColor;
/// 聊天页导航栏Title字体颜色 final Color? chatHeaderTitleTextColor;
/// 聊天页导航栏Back字体颜色 final Color? chatHeaderBackTextColor;
/// 聊天页导航栏Action字体颜色 final Color? chatHeaderActionTextColor;
/// 聊天页历史消息列表字体颜色 final Color? chatMessageItemTextColor;
/// 聊天页历史消息列表来自自己时背景颜色 final Color? chatMessageItemFromSelfBgColor;
/// 聊天页历史消息列表来自非自己时背景颜色 final Color? chatMessageItemFromOthersBgColor;
/// 聊天页历史消息列表已读状态字体颜色 final Color? chatMessageItemUnreadStatusTextColor;
/// 聊天页历史消息列表小舌头背景颜色 final Color? chatMessageTongueBgColor;
/// 聊天页历史消息列表小舌头字体颜色 final Color? chatMessageTongueTextColor;
步骤二:启用配置
调用 TUIKit 提供的 setTheme
方法,传入上一步定义的颜色对象 TUITheme()
即可。该方法可随时调用,动态修改。
final CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();_coreInstance.setTheme(theme: TUITheme());
联系我们
点此进入IM社群,享有专业工程师的支持,解决您的难题
对即时通讯IM解决方案有疑惑?想了解解决方案收费? 联系解决方案专家
腾讯云限时活动1折起,即将结束: 马上收藏
同尘科技为腾讯云授权服务中心,购买腾讯云享受折上折,更有现金返利:同意关联,立享优惠
阿里云解决方案也看看?: 点击对比阿里云的解决方案
暂无评论,你要说点什么吗?