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

  • 相关阅读:
    LeGo-LOAM框架后端优化总结
    【shell】shell自动化脚本笔记与注意事项【未完待续...】
    Python实现邮件发送时如何设置服务器参数?
    in(...) 可能会让你排查Bug到崩溃,哈哈哈
    vue jsx 封装Table 表格+Tree 树形控件
    语言模型大串烧之变形金刚
    [GAN]老照片修复Bringing Old Photos Back to Life论文总结
    算法---树状数组
    P2558 [AHOI2002] 网络传输提交,位运算,高精度
    k8s--基础--29.1--ingress--介绍
  • 原文地址:https://blog.csdn.net/juer2017/article/details/133742219