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

  • 相关阅读:
    WebSocket 入门案例
    关于时间日期
    opencv 的应用(1)
    用户终身价值利用xgboost进行LTV预测
    linux驱动之mmap地址映射
    hdlbits系列verilog解答(always块casez语句)-35
    【Vue基础篇】学习vue就像打游戏一样简单
    【Java面试小短文】Cookie和Session的区别
    vscode中 vue3+ts 项目的提示失效,volar插件失效问题解决方案
    时光倒流-第12届蓝桥杯Scratch选拔赛真题精选
  • 原文地址:https://blog.csdn.net/juer2017/article/details/133742219