ARTICLE · 1042885

保姆级学习开发安卓手机软件实战(一)--跑通 Compose 的第一个里程碑!

发布时间：2026-09-20 10:56:59 最近访问：2026-09-20 10:56:59

没有时间给自己慢慢学习啦~~~领导说，只有实战你才晓得自己是不是真的掌握，甭管是不是PUA啦，从今天开始，我们就不再系统的学习知识了，一切从实际出发，直接拿项目来练手，从零开始咯，我们一步步来实现真实可用的软件，具体遇到什么问题，什么知识，也直接过程中学习吧~~~~

但是首先说明哈，我的软件不一定所有的朋友们能用上，因为是工业软件，需要和硬件设备连接的。但是大家可以跟着实现自己对应的功能。

那简单来介绍呢，我需要做的是通过同一个路由，实现软件APP和硬件的通信。主要就是通过通信协议，控制硬件，并获取硬件的相关数据进行展示。后续是否需要使用数据库或者其他知识，待定，然后功能会不会改，也暂定，因为我们真的不是先有原型再去设计软件的，都是摸索着根据实际使用情况不断调整。

那首先，先从创建工程开始吧，真的手把手教学了（但之前介绍过的知识不再累述哈）~~~

使用空工程的原因：它生成的刚好是需要的技术栈（Compose + Material3 + Kotlin DSL），且它能逼你亲手搭框架。

上图选择了SDK是27，原因是我需要和原有软件对齐，有些代码能复用，避免修改。

然后是修改下载地址，等待成功（这个27的版本用的华为云，好像阿里云没有这个版本）：

distributionUrl=https\://mirrors.huaweicloud.com/gradle/gradle-8.13-bin.zip

那开始软件的第一步，就是主界面。这节我们新建一个设备列表主界面。

先取消勾选（关掉显示优化，看清真实结构）：

锁定横屏

因为我们的需求是在平板上实现，所以就需要锁定横屏，改哪里?

AndroidManifest.xml第 14-18 行那个 <activity> 标签里，新增一行

android:screenOrientation="landscape"。

这里后来我发现，有一个其他的方式，可以在MainActivity.kt中加一句

import android.content.pm.ActivityInfo

// 锁定横屏requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE

放置位置必须如上图所示位置。（Activity 都要在自己的 AndroidManifest 或代码里单独声明方向，因为它们是独立的，方向锁定不传染。因为我们是单Activity ，所以只需要在这里用一次就可以）

这两种方法二选一就可以，推荐第二种。（第一种，Android 16 (API 36) 起，大屏设备（横屏宽度 ≥ 600dp，如平板）会直接忽略你锁的方向，警告的本质是：Google 在劝你"别锁，做自适应布局"。）

新建 DeviceListScreen.kt主业务界面（设备列表界面）

怎么建：右键 ui 文件夹 → New → Package → 命名 screen → 在里面 New → Kotlin Class →选 File → 命名 DeviceListScreen。

给界面填充内容：

package com.example.jstz1.ui.screenimport androidx.compose.foundation.layout.*import androidx.compose.material3.Buttonimport androidx.compose.material3.MaterialThemeimport androidx.compose.material3.Surfaceimport androidx.compose.material3.Textimport androidx.compose.runtime.Composableimport androidx.compose.ui.Alignmentimport androidx.compose.ui.Modifierimport androidx.compose.ui.tooling.preview.Previewimport androidx.compose.ui.unit.dp/** * 设备列表页面（占位版） * 后面会改成真正的设备列表 */@ComposablefunDeviceListScreen(modifier: Modifier = Modifier) {    Surface(        modifier = Modifier.fillMaxSize(),        color = MaterialTheme.colorScheme.background    ) {        Column(            modifier = Modifier                .fillMaxSize()                .padding(24.dp),            horizontalAlignment = Alignment.CenterHorizontally,            verticalArrangement = Arrangement.Center        ) {            Text(                text = "设备列表",                style = MaterialTheme.typography.headlineMedium            )            Spacer(modifier = Modifier.height(8.dp))            Text(                text = "还没有设备",                style = MaterialTheme.typography.bodyMedium            )            Spacer(modifier = Modifier.height(24.dp))            Button(onClick = { /* TODO: 后面跳转添加设备 */ }) {                Text("+ 添加设备")            }        }    }}/** * AS 编辑器右上角的预览窗口用的， * 不会出现在 app 里，不影响运行 */@Preview(showBackground = true, widthDp = 1280, heightDp = 800)@ComposablefunDeviceListScreenPreview() {    MaterialTheme {        DeviceListScreen()    }}

这个界面也就是我规划的的启动后的第一个界面。后续会有很多设备。

先占位吧，后续再慢慢改，我们先把整体框架搞起来。

改 MainActivity.kt 调用新页面

DeviceListScreen(    modifier  = Modifier.padding(innerPadding))

这是最后的实现效果：

好啦，这节就这样啦，下节我们讲主题美化。

因为现在是 Material3 默认的浅色主题（浅蓝白底 +深蓝按钮）。但我们做软件一般有自己的软件UI设计，就有不同的配色，有边框，有背景等等。

然后它不需要加任何库，纯改资源文件，改完立刻看到效果，是理解"Compose 主题体系"最好的练习~~~

相关学习资料