前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >安卓软件开发:用JetpackCompose实现NimReplyAppUI上篇

安卓软件开发:用JetpackCompose实现NimReplyAppUI上篇

原创
作者头像
Nimyears
修改于 2024-10-15 08:48:16
修改于 2024-10-15 08:48:16
6040
举报
文章被收录于专栏:JetpackCompose M3JetpackCompose M3

2024年已经过半了,我作为聋人独立开发者,我经常会时不时反思:自己这半年到底进步了多少?我全身心投入在 Jetpack Compose 和 Material Design 3(M3)的学习和实践中,这是一个用 Jetpack Compose、M3 和 Kotlin 语言实现了NimReplyApp 的开发过程。无论你是刚入门的开发者,还是有经验的开发者,相信这篇文章能给大家很多启发。

一、项目背景

NimReplyApp 是一个模拟电子邮件应用的案例项目,用户可以浏览邮件、查看详细内容和发送回复,在日常工作和生活中都很常见。

为什么选择 Jetpack Compose 和 Material Design 3?这是因为带来了开发模式的改革,开发效率很高,UI 代码很容易理解和维护,而且能实现复杂的动画和状态管理,省去大量传统 UI 开发中的手动操作。

二、前提工作

2.1 项目配置

代码语言:groovy
AI代码解释
复制
dependencies {
    implementation "androidx.compose.ui:ui:1.5.0"
    implementation "androidx.compose.material3:material3:1.2.0"
    implementation "androidx.compose.ui:ui-tooling-preview:1.5.0"
    implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.6.1"
    implementation "androidx.activity:activity-compose:1.7.2"
    implementation "androidx.navigation:navigation-compose:2.5.3"
}

2.2 项目结构

ReplyApp 的整体架构使用了 MVVM(Model-View-ViewModel)模式。通过这个架构,了解 UI 逻辑、数据处理和界面状态分开管理,让代码很整洁和可维护。

项目的主要目录结构如下:

  • data:数据层,模拟了邮件和账户的本地数据源。
  • ui:UI 层,包含了所有的 UI 组件、导航逻辑和主题设置。
  • components:复用的 UI 组件,比如邮件列表、导航栏等。
  • theme:定义应用的颜色、字体和样式,符合 M3 的颜色方案。

2.3 设计数据类

一个对象,它表示一个可以属于一个用户的帐户,一个单个用户可以拥有多个帐户

代码语言:java
AI代码解释
复制
data class Account(
    val id: Long,
    val uid: Long,
    val firstName: String,
    val lastName: String,
    val email: String,
    val altEmail: String,
    @DrawableRes val avatar: Int,

    var isCurrentAccount: Boolean = false
) {
    val fullName: String = "$firstName $lastName"
}

Email数据类用于表示电子邮件。

代码语言:java
AI代码解释
复制
data class Email(
    val id: Long,
    val sender: Account,
    val recipients: List<Account> = emptyList(),
    val subject: String,
    val body: String,
    val attachments: List<EmailAttachment> = emptyList(),
    var isImportant: Boolean = false,
    var isStarred: Boolean = false,
    var mailbox: MailboxType = MailboxType.INBOX,
    val createdAt: String,
    val threads: List<Email> = emptyList()

)

三、NimReplyApp 的核心组件

这个Demo中,我开发了几个关键的 UI 组件,包括搜索栏、邮件列表、邮件详情等,且通过 Preview 实现了实时预览功能,提升了开发效率。下面重点介绍 ReplyDockedSearchBarReplyEmailListItem 以及 ReplyEmailThreadItem 等核心组件。

3.1 ReplyProfileImage——用户头像展示组件

ReplyProfileImage 是一个简单的头像展示组件,通常用于展示发送者或收件人的头像。该组件使用了 Image 组件,结合了 Modifier 实现圆形头像的效果。

代码语言:java
AI代码解释
复制
@Composable
fun ReplyProfileImage(
    drawableResource: Int,
    description: String,
    modifier: Modifier = Modifier
) {
    Image(
        modifier = modifier
            .size(40.dp)
            .clip(CircleShape), 
        painter = painterResource(id = drawableResource),
        contentDescription = description
    )
}

3.1.1 解释代码

  • Image 组件:用于显示用户的头像图片,通过 painterResource 加载指定的资源文件。
  • ModifierCircleShape:通过 Modifier.clip(CircleShape),头像裁剪成圆形效果,图片大小使用 size(40.dp) 进行控制。
  • Modifier:这个组件接收外部传入的 modifier,组件在使用时可以根据不同的布局需求进行扩展和调整。

3.1.2 测试UI

代码语言:java
AI代码解释
复制
@Preview(showBackground = true)
@Composable
fun PreviewReplyProfileImage() {
    ReplyProfileImage(
        drawableResource = R.drawable.nim, 
        description = "NimDrawable"
    )
}

3.2 ReplyDockedSearchBar——带有搜索功能的邮件搜索栏

ReplyDockedSearchBar 是一个支持实时搜索的顶部搜索栏组件,在这里输入关键词来筛选出对应的邮件。这个组件使用了 Jetpack Compose 提供的状态管理和 LazyColumn 展示搜索结果。

代码语言:java
AI代码解释
复制
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ReplyDockedSearchBar(
    emails: List<Email>,
    onSearchItemSelected: (Email) -> Unit,
    modifier: Modifier = Modifier
) {
    var query by remember { mutableStateOf("") }
    var expanded by remember { mutableStateOf(false) }
    val searchResults = remember { mutableStateListOf<Email>() }

    LaunchedEffect(query) {
        searchResults.clear()
        if (query.isNotEmpty()) {
            searchResults.addAll(
                emails.filter {
                    it.subject.startsWith(query, ignoreCase = true) ||
                    it.sender.fullName.startsWith(query, ignoreCase = true)
                }
            )
        }
    }

    DockedSearchBar(
        inputField = {
            SearchBarDefaults.InputField(
                query = query,
                onQueryChange = { query = it },
                onSearch = { expanded = false },
                expanded = expanded,
                onExpandedChange = { expanded = it },
                placeholder = { Text(text = "搜索Email...") }
            )
        },
        expanded = expanded,
        onExpandedChange = { expanded = it },
        content = {
            if (searchResults.isNotEmpty()) {
                LazyColumn {
                    items(searchResults) { email ->
                        ListItem(
                            headlineContent = { Text(email.subject) },
                            supportingContent = { Text(email.sender.fullName) },
                            leadingContent = { ReplyProfileImage(drawableResource = email.sender.avatar, description = email.sender.fullName) }
                        )
                    }
                }
            } else {
                Text(text = if (query.isNotEmpty()) "未找到结果" else "开始输入搜索")
            }
        }
    )
}

3.2.1 解释代码

  • 这个组件的核心是 LazyColumn,它用于展示筛选后的邮件列表。
  • LaunchedEffect 用于监听 query(搜索关键词)的变化,根据输入的内容动态更新搜索结果。
  • DockedSearchBar 是 M3 提供的搜索栏组件,用它实现搜索功能,通过自定义的 InputField 处理搜索输入。

3.2.2 测试 UI

代码语言:java
AI代码解释
复制
@Preview(showBackground = true)
@Composable
fun PreviewReplyDockedSearchBar() {
    ReplyDockedSearchBar(emails = sampleEmailList, onSearchItemSelected = {})
}

3.3 EmailDetailAppBar——用于显示邮件详情的顶栏

EmailDetailAppBar 是邮件详情页面的顶部导航栏,通常用于显示邮件的标题、回复数以及返回操作等功能。用了 M3 提供的 TopAppBar 组件,通过自定义样式和内容。

代码语言:java
AI代码解释
复制
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun EmailDetailAppBar(
    email: Email,
    isFullScreen: Boolean,
    modifier: Modifier = Modifier,
    onBackPressed: () -> Unit
) {
    TopAppBar(
        modifier = modifier,
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = MaterialTheme.colorScheme.inverseOnSurface
        ),
        title = {
            Column(
                modifier = Modifier.fillMaxWidth(),
                horizontalAlignment = if (isFullScreen) Alignment.CenterHorizontally else Alignment.Start
            ) {
                Text(
                    text = email.subject,
                    style = MaterialTheme.typography.titleMedium,
                    color = MaterialTheme.colorScheme.onSurfaceVariant
                )
                Text(
                    modifier = Modifier.padding(top = 4.dp),
                    text = "${email.threads.size} ${stringResource(id = R.string.messages)}",
                    style = MaterialTheme.typography.labelMedium,
                    color = MaterialTheme.colorScheme.outline
                )
            }
        },
        navigationIcon = {
            if (isFullScreen) {
                FilledIconButton(
                    onClick = onBackPressed,
                    modifier = Modifier.padding(8.dp),
                    colors = IconButtonDefaults.filledIconButtonColors(
                        containerColor = MaterialTheme.colorScheme.surface,
                        contentColor = MaterialTheme.colorScheme.onSurface
                    )
                ) {
                    Icon(
                        imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                        contentDescription = stringResource(id = R.string.back_button),
                        modifier = Modifier.size(14.dp)
                    )
                }
            }
        },
        actions = {
            IconButton(onClick = { /*TODO*/ }) {
                Icon(
                    imageVector = Icons.Default.MoreVert,
                    contentDescription = stringResource(id = R.string.more_options_button),
                    tint = MaterialTheme.colorScheme.onSurfaceVariant
                )
            }
        }
    )
}

3.3.1 解释代码

  1. TopAppBar:这个组件是 M3 提供的顶栏导航组件,用于显示应用的标题、导航图标和操作按钮,根据是否是全屏模式调整标题的对齐方式:当全屏显示时,标题居中对齐,非全屏时左对齐。
  2. 标题显示:顶部显示了邮件的 subject,下面显示了邮件的线程(回复数),通过 Column 组合排列标题和子标题。
  3. 导航按钮:在左侧的返回按钮,当用户点击时会触发 onBackPressed 回调,通知父组件进行返回操作。
  4. 操作按钮:右侧的 MoreVert 图标(更多选项按钮),用于扩展后续的功能(如收藏、分享等)。

3.3.2 测试 UI

代码语言:java
AI代码解释
复制
@Preview(showBackground = true)
@Composable
fun PreviewEmailDetailAppBar() {
    EmailDetailAppBar(
        email = sampleEmail,
        isFullScreen = true,
        onBackPressed = {}
    )
}

3.4 ReplyEmailListItem——用于展示邮件列表项

ReplyEmailListItem 组件是每封邮件的列表项展示组件,通过 Card 包装,用户点击列表项时可以进入邮件详情页面。

代码语言:java
AI代码解释
复制
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ReplyEmailListItem(
    email: Email,
    navigateToDetail: (Long) -> Unit,
    toggleSelection: (Long) -> Unit,
    isOpened: Boolean = false,
    isSelected: Boolean = false
) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
            .combinedClickable(
                onClick = { navigateToDetail(email.id) },
                onLongClick = { toggleSelection(email.id) }
            ),
        colors = CardDefaults.cardColors(
            containerColor = if (isSelected) MaterialTheme.colorScheme.primaryContainer
            else if (isOpened) MaterialTheme.colorScheme.secondaryContainer
            else MaterialTheme.colorScheme.surfaceVariant
        )
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(text = email.subject, style = MaterialTheme.typography.titleMedium)
            Text(text = email.sender.fullName, style = MaterialTheme.typography.bodyMedium)
        }
    }
}

3.4.1 解释代码

  • Card 是 Jetpack Compose 提供的一个非常实用的 UI 组件,每一封邮件封装成一个带阴影的卡片样式。
  • combinedClickable 用于处理单击和长按事件,单击进入详情页面,长按选择邮件。

3.4.2 测试 UI

代码语言:java
AI代码解释
复制
@Preview(showBackground = true)
@Composable
fun PreviewReplyEmailListItem() {
    ReplyEmailListItem(
        email = sampleEmail,
        navigateToDetail = {},
        toggleSelection = {},
        isOpened = false,
        isSelected = false
    )
}

3.5 SelectedProfileImage——选中状态的头像显示

在需要对选中的进行特殊处理,比如让选中的状态具有不同的背景颜色或显示一个 Check 图标表明它已被选中。SelectedProfileImage 需要目的。

代码语言:java
AI代码解释
复制
@Composable
fun SelectedProfileImage(modifier: Modifier = Modifier) {
    Box(
        modifier
            .size(40.dp)  
            .clip(CircleShape)  
            .background(MaterialTheme.colorScheme.primary)  
    ) {
        Icon(
            Icons.Default.Check, 
            contentDescription = null,  
            modifier = Modifier
                .size(24.dp)  
                .align(Alignment.Center),  
            tint = MaterialTheme.colorScheme.onPrimary 
        )
    }
}

3.5.1 解释代码

  • Box:用于头像的背景和 Check 图标组合在一起。Box 是一个简单的容器,可以重叠内容对进行对齐。用 Box 圆形头像背景和 Check 图标进行叠加。
  • sizeclip(CircleShape):首先设置头像的大小为 40.dp,通过 clip(CircleShape) 裁剪为圆形。CircleShape 是 Compose 提供的预定义形状,用于创建圆形视图。
  • background(MaterialTheme.colorScheme.primary):设置背景颜色为主题的主色调,表示处于选中状态。
  • Icon:在头像的中央显示一个 Check 图标,图标的颜色使用 MaterialTheme.colorScheme.onPrimary,和背景色形成对比,很显眼。

3.5.2 测试UI

代码语言:java
AI代码解释
复制
@Preview(showBackground = true)
@Composable
fun PreviewSelectedProfileImage() {
    SelectedProfileImage()
}

3.6 ReplyEmailListItemSelected——展示选中状态的邮件列表项

每个邮件项目(ReplyEmailListItem)在被选中时,还需要使用 SelectedProfileImage 代替默认的用户头像,表示已经被选中。

代码语言:java
AI代码解释
复制
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ReplyEmailListItem(
    email: Email,
    navigateToDetail: (Long) -> Unit,
    toggleSelection: (Long) -> Unit,
    modifier: Modifier = Modifier,
    isOpened: Boolean = false,
    isSelected: Boolean = false,
) {
    Card(
        modifier = modifier
            .padding(horizontal = 16.dp, vertical = 4.dp)
            .semantics { selected = isSelected }
            .combinedClickable(
                onClick = { navigateToDetail(email.id) },
                onLongClick = { toggleSelection(email.id) }
            ),
        colors = CardDefaults.cardColors(
            containerColor = if (isSelected) MaterialTheme.colorScheme.primaryContainer
            else if (isOpened) MaterialTheme.colorScheme.secondaryContainer
            else MaterialTheme.colorScheme.surfaceVariant
        )
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(20.dp)
        ) {
            Row(modifier = Modifier.fillMaxWidth()) {
                val clickModifier = Modifier.clickable { toggleSelection(email.id) }
                if (isSelected) {
                    SelectedProfileImage(modifier = clickModifier)  // 显示选中状态的头像
                } else {
                    ReplyProfileImage(
                        drawableResource = email.sender.avatar,
                        description = email.sender.fullName,
                        modifier = clickModifier
                    )
                }

                Column(
                    modifier = Modifier
                        .weight(1f)
                        .padding(horizontal = 12.dp),
                    verticalArrangement = Arrangement.Center
                ) {
                    Text(
                        text = email.sender.firstName,
                        style = MaterialTheme.typography.labelMedium
                    )
                    Text(
                        text = email.createdAt,
                        style = MaterialTheme.typography.labelMedium,
                    )
                }
                IconButton(
                    onClick = { /*TODO*/ },
                    modifier = Modifier.clip(CircleShape)
                ) {
                    Icon(
                        imageVector = Icons.Default.StarBorder,
                        contentDescription = "Favorite",
                        tint = MaterialTheme.colorScheme.outline
                    )
                }
            }

            Text(
                text = email.subject,
                style = MaterialTheme.typography.bodyLarge,
                modifier = Modifier.padding(top = 12.dp, bottom = 8.dp)
            )
            Text(
                text = email.body,
                style = MaterialTheme.typography.bodyMedium,
                maxLines = 2,
                overflow = TextOverflow.Ellipsis
            )
        }
    }
}

3.6.1 解释代码

  1. isSelected 参数:通过这个布尔值来判断当前邮件是否处于选中状态。当 isSelectedtrue 时,显示 SelectedProfileImage,否则显示正常的 ReplyProfileImage
  2. 动态背景颜色:邮件项目的背景颜色会根据 isSelectedisOpened 状态动态改变。
  3. 复用 SelectedProfileImage:通过条件判断,当 isSelectedtrue 时,显示选中状态的头像。

3.6.2 测试 UI

代码语言:java
AI代码解释
复制
@Preview(showBackground = true)
@Composable
fun PreviewReplyEmailListItemSelected() {
    ReplyEmailListItem(
        email = sampleEmail,  
        navigateToDetail = {},
        toggleSelection = {},
        modifier = Modifier.fillMaxWidth(),
        isOpened = true,  // 表示邮件已打开
        isSelected = true  // 表示邮件已选中
    )
}

3.7 ReplyEmailThreadItem——邮件线程展示组件

当用户查看某封邮件的详细内容时,可能会涉及邮件的多个回复,需要用到 ReplyEmailThreadItem 组件展示每条回复。

代码语言:java
AI代码解释
复制
@Composable
fun ReplyEmailThreadItem(
    email: Email,
    modifier: Modifier = Modifier
) {
    Card(
        modifier = modifier.padding(16.dp),
        colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceContainerHigh)
    ) {
        Column(modifier = Modifier.padding(20.dp)) {
            Row {
                ReplyProfileImage(drawableResource = email.sender.avatar, description = email.sender.fullName)
                Column(modifier = Modifier.weight(1f).padding(12.dp)) {
                    Text(text = email.sender.firstName, style = MaterialTheme.typography.labelMedium)
                    Text(text = "1天前", style = MaterialTheme.typography.labelMedium, color = MaterialTheme.colorScheme.outline)
                }
            }
            Text(text = email.subject, style = MaterialTheme.typography.bodyMedium)
            Text(text = email.body, style = MaterialTheme.typography.bodyLarge)
        }
    }
}

3.7.1 解释代码

  • ReplyEmailThreadItem 用于展示邮件的具体内容,适合显示邮件的多个回复。它通过 CardRowColumn 组件实现了信息的排布。
  • ReplyProfileImage 用于显示发送者的头像信息。

3.7.2 测试 UI

代码语言:java
AI代码解释
复制
@Preview(showBackground = true)
@Composable
fun PreviewReplyEmailThreadItem() {
    ReplyEmailThreadItem(email = sampleEmailThread)
}

未完待续,中篇介绍如何实现NimReplyAppLogic的中篇),敬请期待。

有任何问题欢迎提问,感谢大家阅读 )

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
python中的正则表达式(re模块)
正则表达式本身是一种小型的、高度专业化的编程语言,而在python中,通过内嵌集成re模块,程序媛们可以直接调用来实现正则匹配。正则表达式模式被编译成一系列的字节码,然后由用C编写的匹配引擎执行。
测试开发社区
2019/09/20
8460
Python的正则表达式_python正则表达式例子
https://github.com/ziishaned/learn-regex/ https://regex101.com/ 在线练习
全栈程序员站长
2022/09/30
6920
python re模块 正则表达式
正则表达式对字符串的逻辑操作,主要是对字符串的一种过滤,用“元字符” 与“普通字符”组成一个字符串规则对已知的字符串或文本过滤出自己想要的字符串
py3study
2020/01/19
7330
Python正则表达式入门到精通
正则表达式(Regular Expression)是一种用于模式匹配和文本处理的强大工具。在 Python 中,正则表达式通过 re 模块提供支持。本文将详细介绍 Python 中如何使用正则表达式,包括基础语法、常用函数、进阶用法及实际应用示例,帮助深入理解和高效使用正则表达式。
sergiojune
2024/06/25
3710
Python正则表达式入门到精通
python模块之re(正则表达式)
匹配模式 re.ASCII 同re.A,对应的内联标识为(?a),用于向后兼容。使元字符\w, \W, \b, \B, \d, \D, \s和\S仅匹配ASCII字符。该模式只在string模式下有意
枇杷李子橙橘柚
2019/05/26
1.2K0
Python使用正则表达式处理字符串
关于正则表达式基本语法请参考之前发过的文章常用正则表达式锦集与Python中正则表达式的用法,正则表达式扩展语法的高级用法后面会专门整理后再发。 Python标准库re提供了正则表达式操作所需要的功能,既可以直接使用re模块中的方法(见下表)来处理字符串。 方法功能说明compile(pattern[, flags])创建模式对象escape(string)将字符串中所有特殊正则表达式字符转义findall(pattern, string[, flags])列出字符串中模式的所有匹配项finditer(pa
Python小屋屋主
2018/04/16
1.4K0
python--模块之re正则表达式
正则表达式本身是一个小型的、高度专业化的编程语言,而在python中,通过内嵌集成re模块,我们可以通过直接调用来实现正则匹配。
py3study
2020/01/20
7680
Python:正则表达式 re 模块
re.match 尝试从字符串的起始位置匹配一个模式,如果不是起始位置匹配成功的话,match()就返回 None。
丹枫无迹
2019/09/11
6730
正则表达式
一、在python中, 使用正则表达式, 需要导入re模块 import re 二、普通字符匹配, 使用findall 1 #字符匹配, 普通字符 2 #findall: 返回所有满足条件的列表集合
用户7798898
2022/05/06
2740
python学习--正则表达式
正则表达式是一种用来匹配字符串的强有力的工具它的设计思想是用一种描述性的语言来给字符串定义一个规则,凡是符合规则的字符串,我们就认为它“匹配”了,否则,该字符串就是不合法的。
py3study
2020/01/13
7050
python——正则表达式(re模块)详解
在Python中需要通过正则表达式对字符串进⾏匹配的时候,可以使⽤⼀个python自带的模块,名字为re。
全栈程序员站长
2022/08/29
7710
Python面试题之Python正则表达式re模块
正则表达式,是一门相对通用的语言。简单说就是:用一系列的规则语法,去匹配,查找,替换等操作字符串,以达到对应的目的;此套规则,就是所谓的正则表达式。各个语言都有各自正则表达式的内置模块,包括Linux系统中sed、awk也都是使用正则表达式。当然Python中也有对正则表达式的支持,对应的就是Python内置的re模块。
Jetpropelledsnake21
2019/02/15
1.8K0
python re 正则表达式学习总结
# -*- coding: utf-8 -*- import re import os #------------------------------------- re(正则表达式)模块 -------------------------------- #----------------------------------------------------------------------------------------------------- #-----------------------
py3study
2020/01/13
1.1K0
Python 爬虫必备-正则表达式(re模块)
正则表达式须知 正则表达式是用来匹配字符串非常强大的工具,在其他编程语言中同样有正则表达式的概念,Python同样不例外,利用了正则表达式,我们想要从返回的页面内容提取出我们想要的内容就易如反掌了。 正则表达式的大致匹配过程是: 1.依次拿出表达式和文本中的字符比较, 2.如果每一个字符都能匹配,则匹配成功;一旦有匹配不成功的字符则匹配失败。 3.如果表达式中有量词或边界,这个过程会稍微有一些不同。 正则表达式语法规则 下面是Python中正则表达式的一些匹配规则,图片资料来自CSDN 正则表达式
双愚
2018/05/28
6490
常用正则表达式最强汇总(含Python代码举例讲解+爬虫实战)
Python的re模块(正则表达式)提供各种正则表达式的匹配操作。在绝大多数情况下能够有效地实现对复杂字符串的分析并取出相关信息。在讲解如何实际应用正则表达式之前,先教大家学习并掌握正则表达式的基本语法(匹配规则)。
Python研究者
2021/09/09
1.9K0
常用正则表达式最强汇总(含Python代码举例讲解+爬虫实战)
Python 正则表达式 re 模块
compile 函数根据一个模式字符串和可选的标志参数生成一个正则表达式对象。该对象拥有一系列方法用于正则表达式匹配和替换。
为为为什么
2022/08/06
5170
Python正则表达式
前文介绍了正则表达式的定义和使用方法,今天我们就正式讲解Python中是如何使用正则表达式的,最后,通过一个简单的正则表达式运用,爬取网络中的网页数据。
罗罗攀
2021/01/29
4130
Python正则表达式
Python RE 正则表达式模块
匹配任意一个字符(.) 默认匹配除\n之外的任意一个字符,若指定flag=DOTALL则匹配包括换行在内的字符.
王 瑞
2022/12/28
8170
正则表达式
正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配。re 模块使 Python 语言拥有全部的正则表达式功能。
AngelNH
2020/04/16
4250
Python的re模块 --- 正则表达式操作
模式和被搜索的字符串既可以是 Unicode 字符串 (str) ,也可以是8位字节串 (bytes)。 但是,Unicode 字符串与8位字节串不能混用:也就是说,你不能用一个字节串模式去匹配 Unicode 字符串,反之亦然;类似地,当进行替换操作时,替换字符串的类型也必须与所用的模式和搜索字符串的类型一致。
Lansonli
2021/10/09
2.5K0
相关推荐
python中的正则表达式(re模块)
更多 >
LV.0
这个人很懒,什么都没有留下~
目录
  • 一、项目背景
  • 二、前提工作
    • 2.1 项目配置
    • 2.2 项目结构
    • 2.3 设计数据类
  • 三、NimReplyApp 的核心组件
    • 3.1 ReplyProfileImage——用户头像展示组件
    • 3.1.1 解释代码
    • 3.1.2 测试UI
    • 3.2 ReplyDockedSearchBar——带有搜索功能的邮件搜索栏
    • 3.2.1 解释代码
    • 3.2.2 测试 UI
    • 3.3 EmailDetailAppBar——用于显示邮件详情的顶栏
    • 3.3.1 解释代码
    • 3.3.2 测试 UI
    • 3.4 ReplyEmailListItem——用于展示邮件列表项
    • 3.4.1 解释代码
    • 3.4.2 测试 UI
    • 3.5 SelectedProfileImage——选中状态的头像显示
    • 3.5.1 解释代码
    • 3.5.2 测试UI
    • 3.6 ReplyEmailListItemSelected——展示选中状态的邮件列表项
    • 3.6.1 解释代码
    • 3.6.2 测试 UI
    • 3.7 ReplyEmailThreadItem——邮件线程展示组件
    • 3.7.1 解释代码
    • 3.7.2 测试 UI
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档