Jetpack Compose实战教程（三）_jetpack compose 网络请求

Jetpack Compose实战教程（三）

第三章 实现一个带接口数据请求的界面

---

---

一、本章目标

功能还是很简单，界面上头部一个横向布局，加上一个请求接口之后得到的列表，那么直接开干。

友情提醒，如果各位看官有不懂的代码可以先看一下之前的章节，循序渐进，如果还是有不懂的，可以给我留言

二、开始编码

2.1 先把基本布局写好

class IncomeActivity: ComponentActivity() {
   
	override fun onCreate(savedInstanceState: Bundle?) {
   
        super.onCreate(savedInstanceState)
        requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT
        WindowCompat.setDecorFitsSystemWindows(window, false)
        setContent {
   
            contentUI()
        }
    }

	@Composable
    fun contentUI(){
   
        BaseTheme {
   
            Surface(
                modifier = Modifier.fillMaxSize(),
                color = Color.Black
            ) {
   
                Box(Modifier.fillMaxSize()) {
   
                    Image(
                        painter = painterResource(id = R.mipmap.ic_common_bg),
                        contentDescription = null,
                        Modifier
                            .fillMaxWidth()
                            .fillMaxHeight()
                    )
                    Column {
   
                        Spacer(
                        //这里的DimenUtil和StatusBarUtils都是工具类，px2dp就是将px转dp的
                        //getStatusBarHeight就是获取状态栏的高度，大家可以自行百度找代码
                            modifier = Modifier.height(
                                DimenUtil.px2dp(this@IncomeActivity,
                                    StatusBarUtils.getStatusBarHeight(this@IncomeActivity).toFloat()).dp)
                        )
                        title()
                        content()
                    }
                }
            }
        }
    }

	@Composable
    fun title(){
   
        Box(Modifier.fillMaxWidth()){
   
            Image(painter = painterResource(id = R.mipmap.ic_back_white2),
                null,
                modifier = Modifier
                    .size(48.dp)
                    .padding(12.dp)
                    .clickable {
   
                        finish()
                    }
            )

            Text(
                text = "收益明细",
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67