Image 其中一个构造函数支持以下参数 painter 参数和 contentDescription 参数没有默认值，为必传参数。
这样，图片就被构造出来了，看看效果:
那么如何限制图片呢？作为一张头像，我不希望它这么哗众取宠。做图要低调。
在上面，我们认识了 Modifier，然后寻求它的帮助，让我们的图片变小。
Image( painter = painterResource(id = R.drawable.hello_world_new_black), contentDescription = null, modifier = Modifier .width(126.dp) .height(62.dp), contentScale = ContentScale.Inside )
借助 Modifier 分别限制图片的高度和宽度。然后通过 contentScale 参数限制了图片的缩放方式。ContentScale.Inside 尽保持图片比例不变的情况下，尽量充满父控件的体积。
把上面的 Image 放入 preview 方法，看效果：
现在头图被我们掐死了，但是不是很好看，没有脖子，加脖子。
@Preview(showBackground = true) @Composable fun VerticalText() { Column( modifier = Modifier.padding(16.dp) ) { Image( painter = painterResource(id = R.drawable.hello_world_new_black), contentDescription = null, modifier = Modifier .width(126.dp) .height(62.dp), contentScale = ContentScale.Inside )
Spacer(modifier = Modifier.height(16.dp))
Text(“Hello World!”) Text(“Hello Again World!”) Text(“How old are you, World!”) } }
好看多了，嗯，是的。
3.Material Design
当然，谷歌霸霸的产品是支持的 Material Design 是的，我们来看看。
做头图不要锋芒毕露，做图要圆滑。给头图加个圆角是个好主意。
在 Android 传统的 UI 在编写中，圆角图片没有简单的解决方案，需要自定义 Imag **《Android学习笔记总结 最新移动架构视频 大厂安卓面试真题 项目实战源码讲义免费开源 徽信搜索微信官方账号【编程高级路】** eView 实现的方式。但是，朋友们，当你用的时候 Compose 框架时，只需一行代码即可显示圆角图片！家祭无忘告乃翁。
@Preview(showBackground = true) @Composable fun VerticalText() { Column( modifier = Modifier.padding(16.dp) ) { Image( painter = painterResource(id = R.drawable.hello_world_new_black), contentDescription = null, modifier = Modifier .width(126.dp) .height(62.dp) .clip(shape = RoundedCornerShape(4.dp)), contentScale = ContentScale.Inside )
Spacer(modifier = Modifier.height(16.dp))
Text(“Hello World!”) Text(“Hello Again World!”) Text(“How old are you, World!”) } }
还是通过这里 Modifier 要实现需求，怎么样，现在的头图是否圆滑可爱。
头图这样求进步，文字也不能落后，一篇好文章要主次分明，错落有致。
声明 Typography 对象，然后给 Text 添加 style 控制文本样式的属性。
@Preview(showBackground = true) @Composable fun VerticalText() { val typography = MaterialTheme.typography Column( modifier = Modifier.padding(16.dp) ) { Image( painter = painterResource(id = R.drawable.hello_world_new_black), contentDescription = null, modifier = Modifier .width(126.dp) .height(62.dp) .clip(shape = RoundedCornerShape(4.dp)), contentScale = ContentScale.Inside )
Spacer(modifier = Modifier.height(16.dp))
Text(“Hello World!”, style = typography.h3) Text(“Hello Again World!”, style = typography.body1) Text(“How old are you, World!”, style = typography.body2) } }
Typography 包括标题、子标题、段落体、按钮等。
最终效果如下：
怎么样，主次开始变得清晰了吗？结构变得清晰了？情节顺利展开？故事开始自然了？……
当然，最大行数、字体、对齐等其他方法都可以配置。
二、主题
基本布局几乎是一样的，所以让我们做一些共同的事情，就像我们的黄色人有相同的肤色——黄色散落在土地上，有一种顽强，非常东方……
以前的 View 其实系统也是有关系的 theme 定义，那些被定义的定义 style，一系列官方定义 theme 在扩展的基础上，形成我们 app 的主题。
Compose 框架提供了 Material Design 的实现，Material Design Theme 自然也被应用 Compose 中，Material Design Theme 它包括对颜色、文本风格、形状等属性的定义，定义这些属性，包括 button、cards、switches 等待控件相应地改变其默认风格。
1.颜色
颜色在前端开发中无处不在，Color 它可以帮助我们快速构建颜色模型。
可泡着吃：
val red = Color(0xffff0000)
扭着吃：
val blue = Color(red = 0f, green = 0f, blue = 1f)
你也可以干吃：
val black = Color.Black
只要喜欢，甚至可以空翻360度加转体一周半吃:
// 我不会空翻，也不会转身，期待你的表现，加油！
Compose 提供了 [Colors](()数创成套浅色或深色：
val Purple200 = Color(0xFFBB86FC) val Purple500 = Color(0xFF6200EE) val Purple700 = Color(0xFF3700B3) val Teal200 = Color(0xFF03DAC5)
private val DarkColorPalette = darkColors( primary = Purple200, primaryVariant = Purple700, secondary = Teal20, onPrimary = Color.Green )
private val LightColorPalette = lightColors( primary = Purple500, primaryVariant Customize= Purple700, secondary = Teal200, onPrimary = Color.Green
/* Other default colors to override background = Color.White, surface = Color.White, onPrimary = Color.White, onSecondary = Color.Black, onBackground = Color.Black, onSurface = Color.Black, */ )
然后，就可以传递给 MaterialTheme 使用喽：
@Composable fun TestComposeTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable() () -> Unit) { val colors = if (darkTheme) { DarkColorPalette } else { LightColorPalette }
MaterialTheme( colors = colors, typography = Typography, shapes = Shapes, content = content ) }
怎么样，还自动适配深色模式。
而且，我们也可以随时随地获取到主题色：
Text( text = “Hello theming”, color = MaterialTheme.colors.primary )
表面颜色和内容颜色又是另一个概念了，许多组件都接受一对颜色和「内容颜色」：
Surface( color: Color = MaterialTheme.colors.surface, contentColor: Color = contentColorFor(color), …
TopAppBar( backgroundColor: Color = MaterialTheme.colors.primarySurface, contentColor: Color = contentColorFor(backgroundColor), …
这样一来，您不仅可以设置可组合项的颜色，而且还能为包含在可组合项中的内容提供默认颜色。默认情况下，许多可组合项都使用这种内容颜色。例如，Text 的颜色基于其父项的内容颜色，而 Icon ：「俺也一样」，它可以使用该颜色来设置其色调。
contentColorFor() 方法可以为任何主题颜色检索适当的“on”颜色。例如，如果您设置 primary 背景，就会将 onPrimary 设置内容颜色。如果您设置非主题背景颜色，还应指定合理的内容颜色。使用 LocalContentColor 可检索与当前背景形成对比的当前内容颜色。
我们以上面自定义的 Theme 来试验，使用它作为我们的主题：
@Preview @Composable fun TestColor() { TestComposeTheme { Button(onClick = {}) { Text( “hello world” ) } } }Customize
效果：
2.字体排版
字体排版主要通过 Typography 和 TextStyle 类来完成。Typography 构造函数可以提供每种样式的默认值，因此您可以省略不希望自定义的任何样式：
val Rubik = FontFamily( Font(R.font.rubik_regular), Font(R.font.rubik_medium, FontWeight.W500), Font(R.font.rubik_bold, FontWeight.Bold) )
val MyTypography = Typography( h1 = TextStyle( fontFamily = Rubik, fontWeight = FontWeight.W300, fontSize = 96.sp ), body1 = TextStyle( fontFamily = Rubik, fontWeight = FontWeight.W600, fontSize = 16.sp ) /…/ ) MaterialTheme(typography = MyTypography, /…/)
如果您希望自始至终使用同一字体，请指定 defaultFontFamily 参数，并省略所有 TextStyle 元素的 fontFamily：
val typography = Typography(defaultFontFamily = Rubik) MaterialTheme(typography = typography, /…/)
使用时，可以从主题检索 TextStyle，如以下示例所示：
Text( text = “Subtitle2 styled”, style = MaterialTheme.typography.subtitle2 )
3.形状
Compose 中可以轻松地定义各种形状，比如圆角或者操场跑道形状，在传统 View 系统中实现都比较麻烦。
我们现在修改一下上面的 Button 的形状来看看效果：
val Shapes = Shapes( small = CutCornerShape( topStart = 16.dp, topEnd = 0.dp, bottomStart = 16.dp, bottomEnd = 0.dp ), medium = RoundedCornerShape(percent = 50), large = RoundedCornerShape(0.dp) )
这里有一点需要注意的是，默认情况下，许多组件使用这些形状。例如，Button、TextField 和 FloatingActionButton 默认为 small，AlertDialog 默认为 medium，而 ModalDrawerLayout 默认为 large。如需查看完整的对应关系，请参阅[形状方案](()参考文档。 .dp, bottomStart = 16.dp, bottomEnd = 0.dp ), medium = RoundedCornerShape(percent = 50), large = RoundedCornerShape(0.dp) )
[外链图片转存中…(img-G1GBHLl7-1651217222829)]
这里有一点需要注意的是，默认情况下，许多组件使用这些形状。例如，Button、TextField 和 FloatingActionButton 默认为 small，AlertDialog 默认为 medium，而 ModalDrawerLayout 默认为 large。如需查看完整的对应关系，请参阅[形状方案](()参考文档。