• 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. }

  • 相关阅读:
    NetApp财季报告亮点:全闪存阵列需求强劲,云计算收入增长放缓但AI领域前景乐观
    云开发中关于Container与虚拟机之间的比较
    C# Winform围棋棋盘
    RocketMQ的介绍以及部署
    【android Framework 探究】android 13 aosp编译全记录
    HTML中的语义化标签
    .Net6 已知问题总结
    easyPoster一个基于uniapp的canvas绘制海报库支持绘制图表到海报中
    【MySQL】基本查询(二)
    基于java+springboot+mybatis+vue+elementui的毕业生信息招聘平台
  • 原文地址:https://blog.csdn.net/juer2017/article/details/133742219