• Compose加载本地图片和网络图片


    加载本地图片 

    1. Image(
    2. modifier = Modifier
    3. .fillMaxWidth()
    4. .height(200.dp),
    5. painter = painterResource(id = R.drawable.img),
    6. contentDescription = "描述",
    7. //0~1完全透明到完全不透明设置
    8. alpha = 1f,
    9. //图片拉伸或裁剪设置
    10. contentScale = ContentScale.Crop
    11. )

    加载本地图片通过painter属性设置图片。

    alpha设置图片的透明程度,0到1从完全透明到完全不透明。

    contentScale属性设置图片拉伸方式。

    加载网络图片

    1. AsyncImage(
    2. modifier = Modifier
    3. .fillMaxWidth()
    4. .height(200.dp),
    5. model = "https://pic.lvmama.com/uploads/pc/place2/2017-05-23/c362e80d-eadf-4b26-807c-629eec13bb4f.jpg",
    6. contentDescription = "描述",
    7. //图片拉伸或裁剪设置
    8. contentScale = ContentScale.Crop
    9. )

    加载网络图片需要引入三方库

    implementation("io.coil-kt:coil-compose:2.4.0")

    引用coil库后通过AsyncImage下的model属性设置图片地址。

    加载网络图片需要添加网络权限

    <uses-permission android:name="android.permission.INTERNET" />

    完整代码:

    1. import android.os.Bundle
    2. import androidx.activity.ComponentActivity
    3. import androidx.activity.compose.setContent
    4. import androidx.compose.foundation.Image
    5. import androidx.compose.foundation.layout.Column
    6. import androidx.compose.foundation.layout.fillMaxSize
    7. import androidx.compose.foundation.layout.fillMaxWidth
    8. import androidx.compose.foundation.layout.height
    9. import androidx.compose.material3.MaterialTheme
    10. import androidx.compose.material3.Surface
    11. import androidx.compose.runtime.Composable
    12. import androidx.compose.ui.Modifier
    13. import androidx.compose.ui.layout.ContentScale
    14. import androidx.compose.ui.res.painterResource
    15. import androidx.compose.ui.tooling.preview.Preview
    16. import androidx.compose.ui.unit.dp
    17. import coil.compose.AsyncImage
    18. import com.cwj.composedemo.ui.theme.ComposeDemoTheme
    19. class MainActivity : ComponentActivity() {
    20. override fun onCreate(savedInstanceState: Bundle?) {
    21. super.onCreate(savedInstanceState)
    22. setContent {
    23. ComposeDemoTheme {
    24. // A surface container using the 'background' color from the theme
    25. Surface(
    26. modifier = Modifier.fillMaxSize(),
    27. color = MaterialTheme.colorScheme.background
    28. ) {
    29. Greeting()
    30. }
    31. }
    32. }
    33. }
    34. }
    35. @Composable
    36. fun Greeting() {
    37. ImageTest()
    38. }
    39. @Composable
    40. fun ImageTest() {
    41. Column {
    42. //加载本地图片
    43. Image(
    44. modifier = Modifier
    45. .fillMaxWidth()
    46. .height(200.dp),
    47. painter = painterResource(id = R.drawable.img),
    48. contentDescription = "描述",
    49. //0~1完全透明到完全不透明设置
    50. alpha = 1f,
    51. //图片拉伸或裁剪设置
    52. contentScale = ContentScale.Crop
    53. )
    54. //加载网络图片
    55. AsyncImage(
    56. modifier = Modifier
    57. .fillMaxWidth()
    58. .height(200.dp),
    59. model = "https://pic.lvmama.com/uploads/pc/place2/2017-05-23/c362e80d-eadf-4b26-807c-629eec13bb4f.jpg",
    60. contentDescription = "描述",
    61. //图片拉伸或裁剪设置
    62. contentScale = ContentScale.Crop
    63. )
    64. }
    65. }
    66. @Preview(showBackground = true, showSystemUi = true)
    67. @Composable
    68. fun GreetingPreview() {
    69. ComposeDemoTheme {
    70. Greeting()
    71. }
    72. }

  • 相关阅读:
    设计模式------工厂模式的学习
    STL String类详解(上)
    input输入框超出部分用省略号表示以及判断内容是否有超出(PC端)
    2023.10.02
    SAP创建权限对象、角色、并分配角色
    .NET Core Zipkin 链路追踪 跟踪
    【ts】Partial<T>
    linux网络编程中的errno处理
    Vue父组件给子组件传参数
    DM8数据库批量创建表,插入数据,更改表信息,删除测试表
  • 原文地址:https://blog.csdn.net/juer2017/article/details/133742219