jetpack compose的@Preview和自定义主题

1.@Preview

@Preview可以在 Android Studio 的预览窗口中实时查看和调试 UI 组件。

基本使用
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview@Composable
fun Greeting(name: String) {Text(text = "Hello, $name!")
}@Preview
@Composable
fun DefaultPreview() {Greeting("World")
}

上述代码会在预览窗口中显示 Greeting 组件,文本内容为 “Hello, World!”。

预览参数

@Preview 提供了多种参数来定制预览的行为和外观:

  1. name:设置预览的名称,方便在预览窗口中区分不同的预览。
  2. showBackground:布尔值,设置为 true 可以显示背景颜色。
  3. backgroundColor:设置预览背景颜色,使用 16 进制表示颜色(0xAARRGGBB)。
  4. widthDpheightDp:设置预览窗口的宽度和高度,以 dp 为单位。
  5. fontScale:设置字体缩放比例,模拟不同的系统字体大小设置。
示例代码
@Preview(name = "Default Preview",showBackground = true,backgroundColor = 0xFFEFEFEF, // 灰色背景widthDp = 320,heightDp = 480,fontScale = 1.5f // 字体放大 1.5 倍
)
@Composable
fun CustomPreview() {MaterialTheme{Surface(modifier = Modifier.fillMaxSize(),color = MaterialTheme.colors.background) {Greeting("Compose")}}
}
多个预览
@Preview(name = "Phone Preview", device = "spec:width=411dp,height=891dp,dpi=420")
@Preview(name = "Tablet Preview", device = "spec:width=1280dp,height=800dp,dpi=240")
@Composable
fun MultiDevicePreview() {MaterialTheme {Greeting("Multi-device")}
}
横屏预览
@Preview(name = "Landscape Preview", widthDp = 640, heightDp = 360)
@Composable
fun LandscapePreview() {MaterialTheme {Greeting("Landscape")}
}

2. 自定义主题示例

在Jetpack Compose中自定义主题涉及到定义自己的颜色、字体和形状等属性,并将它们应用到整个应用程序中。

1. 定义颜色

src/main/java/包名/ui/theme/Color.kt中创建或修改文件:

import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Shapes
import androidx.compose.material.Typography
import androidx.compose.material.lightColors
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.jetsnack.Rval Purple200 = Color(0xFFBB86FC)
val Purple500 = Color(0xFF6200EE)
val Purple700 = Color(0xFF3700B3)
val Teal200 = Color(0xFF03DAC5)
val LightGreen = Color(0xFFC8E6C9)
val DarkGreen = Color(0xFF388E3C)

2. 定义字体

src/main/java/包名/ui/theme/Type.kt中创建或修改文件:

val AppFontFamily = FontFamily(fonts = listOf(Font(R.font.karla_bold),Font(R.font.karla_regular, FontWeight.Bold))
)val Typography = Typography(body1 = TextStyle(fontFamily = AppFontFamily,fontWeight = FontWeight.Normal,fontSize = 16.sp),button = TextStyle(fontFamily = AppFontFamily,fontWeight = FontWeight.Bold,fontSize = 14.sp),caption = TextStyle(fontFamily = AppFontFamily,fontWeight = FontWeight.Normal,fontSize = 12.sp)
)

3. 定义形状

定义应用程序的形状样式。在src/main/java/包名/ui/theme/Shape.kt中创建或修改文件:

val Shapes = Shapes(small = RoundedCornerShape(4.dp),medium = RoundedCornerShape(8.dp),large = RoundedCornerShape(16.dp)
)

4. 应用主题

src/main/java/包名/ui/theme/Theme.kt中创建或修改文件:


private val ColorPalette = lightColors(primary = Purple500,primaryVariant = Purple700,secondary = Teal200,background = LightGreen,surface = LightGreen,onPrimary = Color.White,onSecondary = Color.Black,onBackground = DarkGreen,onSurface = DarkGreen,
)@Composable
fun AppTheme(content: @Composable () -> Unit) {MaterialTheme(colors = ColorPalette,typography = Typography,shapes = Shapes,content = content)
}

5. 使用主题

MainActivity或其他@Composable函数中,使用AppTheme包裹UI组件:

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {AppTheme {// UI组件}}}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/32562.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【html】用html+css实现银行的账户信息表格

我们先来看一看某银行的账户信息表格 我们自己也可以实现类似的效果 效果图: 大家可以看到&#xff0c;其实效果差不多 接下来看看我们实现的代码 源码&#xff1a; <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"&…

机械师硬盘数据清空怎么办?机械师硬盘数据清空怎么恢复

机械师硬盘数据清空怎么恢复&#xff1f;随着数字化时代的到来&#xff0c;数据已成为我们生活和工作中不可或缺的一部分。然而&#xff0c;硬盘数据的意外清空往往会给我们带来极大的困扰。本文将探讨在机械师硬盘数据清空后&#xff0c;我们应该如何快速有效地恢复数据。 图片…

深入理解Java中的JPA与Hibernate

深入理解Java中的JPA与Hibernate 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将深入探讨Java中的JPA&#xff08;Java Persistence API&#xff09;…

二本毕业,我是如何成为BAT-安卓开发工程师?

1.对基础原理不断挖掘 进入公司&#xff0c;我的职位是Linux应用开发工程师&#xff0c;做App网络传输模块&#xff0c;本质上就是把本地的数据通过socket传输到服务端。用到的技术是C语言&#xff0c;网络编程&#xff0c;多线程编程。 那时是最痛苦的几个月&#xff0c;因为…

如何在Java中实现线程安全的单例模式

如何在Java中实现线程安全的单例模式 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将探讨在Java中如何实现线程安全的单例模式。单例模式是一种常见的…

JDBC是什么?

JDBC&#xff08;Java Database Connectivity&#xff09;称为Java数据库连接&#xff0c;它是一种用于数据库访问的应用程序API&#xff0c;由一组用Java语言编写的类和接口组成。以下是关于JDBC的详细说明&#xff1a; 1. 定义 JDBC提供了一种基准&#xff0c;据此可以构建…

[FreeRTOS 功能应用] 互斥访问与回环队列 功能应用

文章目录 一、基础知识点二、代码讲解三、结果演示四、代码下载 一、基础知识点 [FreeRTOS 基础知识] 互斥访问与回环队列 概念 [FreeRTOS 内部实现] 互斥访问与回环队列 [FreeRTOS 内部实现] 创建任务 xTaskCreate函数解析 本实验是基于STM32F103开发移植FreeRTOS实时操作系…

解决WebStorm中不显示npm任务面板

鼠标右键项目的package.json文件&#xff0c;然后点击show npm scripts选项。 然后npm工具窗口就显示了&#xff1a;

02--MySQL数据库概述

目录 第10章 子查询 10.1 SELECT的SELECT中嵌套子查询 10.2 SELECT的WHERE或HAVING中嵌套子查询 10.3 SELECT中的EXISTS型子查询 10.4 SELECT的FROM中嵌套子查询 第11章 MySQL支持的数据类型 11.1 数值类型:包括整数和小数 1、整数类型 2、bit类型 3、小数类型 11.2…

Typescript: declear

问: const book: string 这样就可以声明而且赋值为什么还用declear去分成好几步骤走呢? 同时即使不赋值只需要使用const book: string;难道不也行吗? 为什么要加上一个declear呢? 回答: 在 TypeScript 中&#xff0c;声明变量和使用 declare 声明类型信息是两个不同的概念…

【Python系列】探索 NumPy 中的 mean 函数:计算平均值的利器

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

Selenium WebDriver - 动作API

本文翻译整理自&#xff1a;https://www.selenium.dev/documentation/webdriver/actions_api/ 文章目录 一、行动建设者二、暂停三、释放所有操作四、键盘动作1、钥匙2、钥匙放下3、钥匙打开4、发送钥匙活性元素指定元素 5、复制和粘贴 五、鼠标动作1、点击并按住2、点击并释放…

软件串口接收子程序

代码; stduart.c /*《AVR专题精选》随书例程3.通信接口使用技巧项目&#xff1a;使用延时法实现半双工软件串口文件&#xff1a;sfuart.c说明&#xff1a;软件串口驱动文件作者&#xff1a;邵子扬时间&#xff1a;2012年12月13日*/ #include "sfduart.h"// 循环中延…

WinMerge v2 (开源的文件比较/合并工具)

前言 WinMerge 是一款运行于Windows系统下的免费开源的文件比较/合并工具&#xff0c;使用它可以非常方便地比较多个文档内容甚至是文件夹与文件夹之间的文件差异。适合程序员或者经常需要撰写文稿的朋友使用。 一、下载地址 下载链接&#xff1a;http://dygod/source 点击搜…

【Linux】进程间通信3——线程安全

1.Linux线程互斥 1.1.进程线程间的互斥相关背景概念 临界资源&#xff1a; 多线程执行流共享的资源叫做临界资源。临界区&#xff1a; 每个线程内部&#xff0c;访问临界资源的代码&#xff0c;就叫做临界区。互斥&#xff1a; 任何时刻&#xff0c;互斥保证有且只有一个执行…

动态创建接口地址

和SpringBoot版本有关系 这里用的boot 2.2.2

docker使用记录

目的&#xff1a;在ubuntu22.04中使用docker拉取ubuntu20.04镜像&#xff0c;后续安装ros1以及相机和激光驱动 1.pull 镜像/etc/docker文件中修改daemon.json{"runtimes": {"nvidia": {"path": "nvidia-container-runtime","run…

LabVIEW电控旋翼测控系统

开发基于LabVIEW开发的电控旋翼测控系统&#xff0c;通过高效监控和控制提升旋翼系统的性能和安全性。系统集成了多种硬件设备&#xff0c;采用模块化设计&#xff0c;实现复杂的控制和数据处理功能&#xff0c;适用于现代航空航天领域。 项目背景 传统旋翼系统依赖机械和液压…

IO模型详解

阻塞IO模型 假设应用程序的进程发起IO调用&#xff0c;但是如果内核的数据还没准备好的话&#xff0c;那应用程序进程就一直在阻塞等待&#xff0c;一直等到内核数据准备好了&#xff0c;从内核拷贝到用户空间&#xff0c;才返回成功提示&#xff0c;此次IO操作&#xff0c;称…

C# 中的静态关键字

C# 语言中的 static 关键字用于声明静态类和静态类成员。静态类和静态类成员&#xff08;如构造函数、字段、属性、方法和事件&#xff09;在只需要一个对象&#xff08;类或类成员&#xff09;副本并在类型&#xff08;和成员&#xff09;的所有实例&#xff08;对象&#xff…