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

  • 相关阅读:
    数据结构【链表】
    [“1“, “2“, “3“].map(parseInt) 答案是多少
    如何让设计师快速提高设计美感?这5个网站就够了
    C专家编程 第5章 对链接的思考 5.3 函数库链接的5个特殊秘密
    音乐制作软件 Ableton Live 11 Suite mac中文版功能介绍
    【软考软件评测师】基于风险的测试技术
    React 与 TS 结合使用时组件传参总结
    超详细实战Docker+Jenkins部署生产环境前后分离项目
    Redis key分布
    解决:Loading class `com.mysql.jdbc.Driver‘. This is deprecated.
  • 原文地址:https://blog.csdn.net/juer2017/article/details/133742219