Android全新UI框架之常用ComposeUI组件

在Compose中,每个组件都是一个带有@Composable注解的函数,被称为Composable。Compose已经预置了很多基于MD设计规范的Composable组件。
在布局方面,Compose提供了Column、Row、Box三种布局组件(感觉跟flutter差不多),类似于传统视图开发中的LinearLayout(Vertical)、LinearLayout(Horizontal)、RelateiveLayout,可以满足各类产品的常见布局需求。

Modifier修饰符

在传统开发中,使用xml文件来描述组件的样式,而compose则是使用Modifier修饰符。Modifier允许我们通过链式调用的方式为组件应用一系列的样式设置,如边距、字体、位移等。在Compose中,每个基础的Composable组件都有一个modifier参数,通过传入自定义的Modifier来修改组件的样式。

  • 常见修饰符

    Modifier.size设置被修饰组件的大小 Image( painter = painterResource(id = R.drawable.ic_launcher),contentDescription = null, modifier = Modifier.size(width = 10.dp, height = 10.dp) )
    Modifier.background设置被修饰组件的背景颜色。背景色支持纯色背景,也可以使用brush设置渐变背景Image(painter = painterResource(id = R.drawable.ic_launcher),contentDescription = null,modifier = Modifier.size(width = 100.dp, height = 100.dp).background(brush = Brush.verticalGradient(colors = listOf(Color.Blue,Color.Red)))))
    Modifier.fillMaxXXX()让组件在高度或者宽度上填满父空间fillMaxSize():填满整个父空间, fillMaxHeight():高度填满父空间,fillMaxWidth():宽度填满父空间
    Modifier.border&Modifier.paddingborder用来为被修饰组件添加边框。边框可以指定颜色、粗细、以及通过shape指定形状。padding用来为被修饰组件增加间隙。可以在border前后各插入一个padding,区分对外和对内的间距 Box(modifier = Modifier.padding(5.dp).border(2.dp, Color.Green, shape = RoundedCornerShape(2.dp)).padding(5.dp)) { Spacer(modifier = Modifier.size(width = 100.dp, height = 10.dp).background(Color.Blue)) }
    Modifier.offset用来移动被修饰组件的位置,分别传入水平方向和垂直方向的偏移量即可 Box(modifier = Modifier.size(100.dp).background(Color.Blue).offset(x = 10.dp, y = 10.dp).background(Color.Cyan)) {}
  • 作用域限定Modifier修饰符
    Compose充分发挥kotlin的语法特性,让某些Modifier修饰符只能在特定作用域中使用,有利于类型安全地调用它们。所谓“作用域”,在kotlin中就是一个带有Receiver的代码块。注意Receiver代码块默认可以跨层级访问。在compose的DSL中,一般只需要调用当前作用域的方法,为此可以通过@LayoutScopeMarker注解来规避该问题。常见组件的Receiver作用域类型均已使用@LayoutScopeMarker注解进行了声明,使用了该注解之后,像跨级调用外层作用域的方法必须通过显式指明Receiver具体类型。

    @LayoutScopeMarker
    @Immutable
    interface ColumnScope
    

    常见的作用域限定Modifier修饰符:

    1. matchParentSize
      matchParentSize是只能在BoxScope中使用的作用域限定修饰符。当使用matchParentSize设置尺寸时,可以保证当前组件的尺寸与父组件相同。而父组件默认的是wrapContent。如果使用fillMaxSize取代matchParentSize,那么该组件的尺寸会被设置为父组件所允许的最大尺寸,这样会导致背景铺满整个屏幕,二者区别如下图所示。

          Column(modifier = Modifier.background(Color.DarkGray)) {Box() {Box(modifier = Modifier
      //                .fillMaxSize().matchParentSize().background(Color.Cyan))Spacer(modifier = Modifier.size(50.dp).padding(10.dp).background(Color.Red))}}
      

      matchParentSize效果如下所示:
      在这里插入图片描述
      fillMaxSize效果如下所示:在这里插入图片描述

    2. weight
      在RowScope和ColumnScope中,可以使用专属的weight修饰符来设置尺寸。与size不同的是weight允许组件通过百分比设置尺寸,也就是允许组件可以自适应适配各种屏幕尺寸的移动端设备。

          Column(modifier = Modifier.background(Color.DarkGray).width(300.dp).height(200.dp)) {Spacer(modifier = Modifier.fillMaxWidth().weight(1f).background(Color.White))Spacer(modifier = Modifier.fillMaxWidth().weight(1f).background(Color.Red))Spacer(modifier = Modifier.fillMaxWidth().weight(1f).background(Color.Blue))}
      
  • Modifier实现原理
    各位读者可以参考下面这篇博客:
    图解Compose Modifier实现原理 ,竟然如此简单!

常用的基础组件

文字组件
  1. Text文本
    在Compose中,Text是遵循MD设计规范的上层文本组件,如果想脱离MD,也可以直接使用更底层的文本组件BasicText。
    @Composable
    fun Text(text: String,modifier: Modifier = Modifier,color: Color = Color.Unspecified,fontSize: TextUnit = TextUnit.Unspecified,fontStyle: FontStyle? = null,fontWeight: FontWeight? = null,fontFamily: FontFamily? = null,letterSpacing: TextUnit = TextUnit.Unspecified,textDecoration: TextDecoration? = null,textAlign: TextAlign? = null,lineHeight: TextUnit = TextUnit.Unspecified,overflow: TextOverflow = TextOverflow.Clip,softWrap: Boolean = true,maxLines: Int = Int.MAX_VALUE,onTextLayout: (TextLayoutResult) -> Unit = {},style: TextStyle = LocalTextStyle.current
    )
    
    在很多应用场景中,我们需要在一段文字中对局部内容应用特别格式以示突出,比如一个超链接,此时需要用到AnnotatedString。AnnotatedString是一个数据类,除了文本值,还包含一个SpanStyle和ParagraphStyle的Range列表。SpanStyle用于描述在文本中子串的文字样式,ParagraphStyle则用于描述文本中子串的段落样式,Range确定子串的范围。
    用法如下所示:
    //append用来添加子串的文本
    //withStyle为append的子串指定文字或段落样式
    Text(text = buildAnnotatedString {withStyle(style = SpanStyle(fontSize = 24.sp)){append("你现在学习的章节是")}withStyle(style = SpanStyle(fontSize = 24.sp, fontWeight = FontWeight.W900)){append("Text")}append("\n")withStyle(style = ParagraphStyle(lineHeight = 25.sp)){append("在刚刚讲过的内容中,我们学会了如何应用文字样式,以及如何限制文本的行数和处理溢出的视觉效果。")append("\n")append("现在,我们正在学习")withStyle(style = SpanStyle(fontWeight = FontWeight.W900, textDecoration = TextDecoration.Underline, color = Color(0xff59a869))){append("AnnotatedString")}}})
    
    SpanStyle继承了TextStyle中关于文字样式相关的字段,而ParagraphStyle继承了TextStyle中控制段落的样式,例如textAlign、lineHeight等。SpanStyle和ParagraphStyle中的设置优先于TextStyle中同名属性设置。
  • SelectionContainer选中文字
    Text自身默认是不能被长按选择的,Compose提供了专门的SelectionContainer组件,对包裹的Text进行选中。

    SelectionContainer() {Text(text = "我是可以被复制的文字")
    }
    
  • ClickableText
    Compose提供了一种可点击文本组件,可以响应对文字的点击,并返回点击位置。可以让AnnotatedString子串在相应的ClickedText中点击后,做出不同的动作。在AnnotatedString中可以为子串添加一个tag标签,在处理onClick事件时,根据tag实现不同的逻辑。

     ClickableText(text = annotated, onClick ={annotated.getStringAnnotations(tag = "URL",start = it,end = it).firstOrNull()?.let {Log.e("MainActivity",it.toString())}} )val annotated = buildAnnotatedString {withStyle(style = ParagraphStyle(lineHeight = 25.sp)){// 开始一个注解区域pushStringAnnotation(tag = "URL", annotation = "https://www.baidu.com")// 追加带有注解的文本withStyle(style = SpanStyle(fontWeight = FontWeight.W900,textDecoration = TextDecoration.Underline,color = Color(0xff59a869))){append("AnnotatedString")}// 结束注解区域pop()//下面这段文本不会有注解withStyle(style = SpanStyle(fontWeight = FontWeight.W900,textDecoration = TextDecoration.Underline,color = Color(0xff59a869))){append("NotAnnotatedString")}}}
    
  • TextField输入框
    TextField组件是我们最常用的文本输入框,它也遵循MD设计准则。它也有一个低级别的底层组件,BasicTextField,与TextField和OutlinedTextField不同的是,BasicTextField拥有更多的自定义效果。由于TextField和OutlinedTextField是根据MD准则设计的,无法直接修改输入框的高度,如果尝试修改高度,会看到输入区域被截断,影响正常输入。

    fun TextField(value: TextFieldValue,onValueChange: (TextFieldValue) -> Unit,modifier: Modifier = Modifier,enabled: Boolean = true,readOnly: Boolean = false,textStyle: TextStyle = LocalTextStyle.current,label: @Composable (() -> Unit)? = null,placeholder: @Composable (() -> Unit)? = null,leadingIcon: @Composable (() -> Unit)? = null,trailingIcon: @Composable (() -> Unit)? = null,supportingText: @Composable (() -> Unit)? = null,isError: Boolean = false,visualTransformation: VisualTransformation = VisualTransformation.None,keyboardOptions: KeyboardOptions = KeyboardOptions.Default,keyboardActions: KeyboardActions = KeyboardActions.Default,singleLine: Boolean = false,maxLines: Int = Int.MAX_VALUE,interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },shape: Shape = TextFieldDefaults.filledShape,colors: TextFieldColors = TextFieldDefaults.textFieldColors()
    )
    fun BasicTextField(value: String,onValueChange: (String) -> Unit,modifier: Modifier = Modifier,enabled: Boolean = true,readOnly: Boolean = false,textStyle: TextStyle = TextStyle.Default,keyboardOptions: KeyboardOptions = KeyboardOptions.Default,keyboardActions: KeyboardActions = KeyboardActions.Default,singleLine: Boolean = false,maxLines: Int = Int.MAX_VALUE,visualTransformation: VisualTransformation = VisualTransformation.None,onTextLayout: (TextLayoutResult) -> Unit = {},interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },cursorBrush: Brush = SolidColor(Color.Black),decorationBox: @Composable (innerTextField: @Composable () -> Unit) -> Unit =@Composable { innerTextField -> innerTextField() }
    ) 
    

    TextField输入框案例如下:

    @Composablefun TextFieldSample(){var text by remember {mutableStateOf("")}Box(modifier = Modifier.fillMaxSize().background(Color(0xfd3d3d3)),contentAlignment = Alignment.Center) {BasicTextField(modifier = Modifier.padding(10.dp).background(Color.White, CircleShape).height(30.dp).fillMaxSize(),value = text,onValueChange = {text = it},decorationBox = {Row(verticalAlignment = Alignment.CenterVertically,modifier = Modifier.padding(vertical = 2.dp, horizontal = 8.dp)) {Icon(imageVector = Icons.Filled.Search, contentDescription = null)Box(modifier = Modifier.padding(horizontal = 10.dp).width(100.dp), contentAlignment = Alignment.CenterStart) {if(text.isEmpty()){Text(text = "输入点东西看看吧~",style = TextStyle(color = Color(0,0,0,128)))}it()}Box(contentAlignment = Alignment.CenterEnd){if(text.isNotEmpty()){IconButton(onClick = { text="" },modifier = Modifier.size(16.dp)) {Icon(imageVector = Icons.Filled.Close, contentDescription = null, tint = Color.Red)}}}}})}}
    
  • 图片组件

    1. Icon图标
      Icon组件用于显示一系列小图标。Icon组件支持三种不同类型的图片设置:
    @Composable
    fun Icon(imageVector: ImageVector,//矢量图对象,可以显示SVG格式的图标contentDescription: String?,modifier: Modifier = Modifier,tint: Color = LocalContentColor.current
    )
    @Composable
    fun Icon(bitmap: ImageBitmap,//位图对象,可以显示JPG、PNG等格式的图标contentDescription: String?,modifier: Modifier = Modifier,tint: Color = LocalContentColor.current
    )
    @Composable
    fun Icon(painter: Painter,//代表一个自定义画笔,可以使用画笔在Canvas上直接绘制图标contentDescription: String?,modifier: Modifier = Modifier,tint: Color = LocalContentColor.current
    )
    
    1. Image图片
      Image组件用来显示一张图片。它和Icon一样也支持三种类型的图片设置。
  • 按钮组件

    1. Button按钮
      Button也是最常用的组件之一,它也是按照MD风格来实现的。Button并非唯一可点击组件,理论上任何Composable组件都可以通过Modifier.clickable修饰符化身为可点击组件。
      案例如下:
        @Composablefun ButtonSample(){val interactionSource = remember {MutableInteractionSource()}val pressState = interactionSource.collectIsPressedAsState()val borderColor = if (pressState.value) Color.Green else Color.WhiteButton(modifier = Modifier.clickable {//该方法在button组件会失效Log.e("MainActivity","点击Butttonclickable")},interactionSource = interactionSource,border = BorderStroke(2.dp, color = borderColor),onClick = {Log.e("MainActivity","点击Buttton")}) {Icon(imageVector = Icons.Filled.Done, contentDescription = null, modifier = Modifier.size(ButtonDefaults.IconSize))Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing))Text(text = "确认")}}
    
    1. IconButton图标按钮
      IconButton组件实际上只是Button组件的简单封装(一个可点击的图标),它一般用于应用栏中的导航或者其他行为。一般来说,需要在IconButton组件里提供一个图标组件,这个图标的默认尺寸一般为24*24dp。
     IconButton(onClick = { text="" },modifier = Modifier.size(16.dp)) {Icon(imageVector = Icons.Filled.Close, contentDescription = null, tint = Color.Red)
    
    1. FloatingActionButton悬浮按钮
        @Composablefun FloatButton(){FloatingActionButton(onClick = {}) {Row() {Text(text = "添加到我的喜欢")Icon(imageVector = Icons.Filled.Done, contentDescription = null, modifier = Modifier.size(ButtonDefaults.IconSize))}}ExtendedFloatingActionButton(onClick = { /*TODO*/ }) {Row() {Text(text = "添加到我的喜欢")Icon(imageVector = Icons.Filled.Done, contentDescription = null, modifier = Modifier.size(ButtonDefaults.IconSize))}}}
    
  • 选择器

    1. CheckBox复选框
        @Composablefun ChecBoxDemo(){val checkedState = remember {mutableStateOf(true)}Checkbox(checked = checkedState.value,onCheckedChange ={checkedState.value = it},colors = CheckboxDefaults.colors(checkedColor =  Color(0xff0079d3)))}
    
    1. TriStateCheckBox三态选择框
      很多时候,我们的复选框会有很多个,并且希望能够统一选择或者取消,这个时候就可以使用三态选择框
     @Composablefun ChecBoxDemo(){val (state,onStateChange) = remember { mutableStateOf(true) }val (state2,onStateChange2) = remember { mutableStateOf(true) }val parentState = remember(state,state2) {if (state&&state2) ToggleableState.Onelse if (!state&&!state2) ToggleableState.Offelse ToggleableState.Indeterminate}val onParentClick = {val s = parentState != ToggleableState.OnonStateChange(s)onStateChange2(s)}TriStateCheckbox(colors = CheckboxDefaults.colors(checkedColor = Color.Red),state = parentState,onClick = onParentClick,)Column(Modifier.padding(10.dp,0.dp,0.dp,0.dp)) {Checkbox(checked = state, onCheckedChange = onStateChange )Checkbox(checked = state2, onCheckedChange = onStateChange2 )}}
    
    1. Switch单选开关——控制单个项目的开启或关闭状态
      @Composablefun ChecBoxDemo(){val checkedState = remember {mutableStateOf(true)}Switch(checked = checkedState.value, onCheckedChange = {checkedState.value = it})}
    
    1. Slider滑竿组件——可用来做音量、亮度之类的数值调整或进度条
     var sliderPosition by remember {mutableStateOf(0f)}Slider(value = sliderPosition, onValueChange = {sliderPosition = it})
    
    1. 进度条
      var progress by remember {mutableStateOf(0.1f)}val animatedProgress by animateFloatAsState(targetValue = progress, animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec)Column {CircularProgressIndicator(progress = animatedProgress)Spacer(modifier = Modifier.requiredHeight(30.dp))OutlinedButton(onClick = {if(progress<1f)progress +=.1f}) {Text(text = "增加进度")}}
    
    1. 对话框
        @Composablefun DialogDemo(){val openDialog = remember {mutableStateOf(true)}val dialogWidth = 200.dpval dialogHeight = 50.dpif(openDialog.value){Dialog(onDismissRequest = { openDialog.value = false },properties = DialogProperties(dismissOnBackPress = true,//允许通过点击物理返回键取消对话框dismissOnClickOutside = true//允许点击对话框外部取消对话框)) {Box(modifier = Modifier.size(dialogWidth, dialogHeight).background(Color.Blue))}}}
    

常用的布局组件

  • 线性布局
    线性布局对应于传统视图中的linearLayout,Compose根据orientation的不同又分为Column和Row。

    1. Column
      Column是一个垂直线性布局组件,它能够将子项按照从上到下的顺序垂直排列。verticalArrangement和horizontalAlignment参数分别可以帮助我们安排子项的垂直/水平位置,在默认的情况下,子项会以垂直方向上靠上,水平方向上靠左来布置。
    2. Row
      Row组件能够将内部子项按照从左到右的方向水平排列。用法Column类似。
  • 帧布局

    1. Box
      Box组件是一个能够将里面的子项依次按照顺序堆叠的布局组件,在使用上类似于传统视图中的Framelayout。
    2. Surface
      Surface是一个平面,在MD设计准则中也同样如此,我们可以将很多的组件摆放在这个平面之上,可以设置这个平面的边框、圆角、颜色等。
  • Spacer留白
    在很多时候,需要让两个组件之间留有空白的间隔,这个时候就可以使用该组件。其实当Box组件没有content时,完全可以用Spacer替换。可以给Spacer做如下封装,可以更方便地用在水平或垂直布局中。

        @Composablefun WidthSpacer(value:Dp){Spacer(modifier = Modifier.width(value))}@Composablefun HeightSpacer(value:Dp){Spacer(modifier = Modifier.height(value))}
    
  • ConstraintLayout约束布局
    各位读者可以参考下面这篇博客:
    Compose ConstraintLayout 详讲

  • Scaffold脚手架
    Scaffold组件实现了MD的布局结构,通过配合其他MD组件可以轻松构建MD风格的页面。

        @SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")@OptIn(ExperimentalMaterial3Api::class)@Composablefun Sample(){var selectedItem by remember {mutableStateOf(0)}val items = listOf(Item("主页",R.drawable.ic_launcher),Item("列表",R.drawable.ic_launcher),Item("设置",R.drawable.ic_launcher),)Scaffold(topBar ={TopAppBar(title = { Text(text = "主页")},navigationIcon = {IconButton(onClick = { /*TODO*/ }) {Icon(imageVector = Icons.Filled.Menu, contentDescription = null)}})}){Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center){Text(text = "主页面")}}}
    

列表

很多产品中都有展示一组数据的需求场景,如果数据数量是可以枚举的,则仅需通过Column组件来枚举列出。然而很多时候,列表中的项目会非常多,我们需要滑动列表来查看所有内容,可以通过给Column的modifier添加verticalScroll方法来让列表实现滑动。

    @Composablefun ListDemo(){val initialCapacity = 1000 // 设置你想要的初始容量val items = ArrayList<String>(initialCapacity)for (i in 1..initialCapacity) {items.add("我是text$i")}Column(modifier = Modifier.verticalScroll(state = ScrollState(5), enabled = true)) {items.forEach{Text(text = "$it")}}}

给Column的Modifier添加verticalScroll方法可以让列表实现滑动。但是如果列表过长,众多的内容会占用大量的内存。然而更多的内容对于用户其实都是不可见的,没有必要加载到内存。所以compose提供了专门用于处理长列表的组件,LazyColumn和LazyRow,其作用类似于传统视图中的Listview和RecyclerView。

  LazyColumn(modifier = Modifier.fillMaxSize().background(Color.Cyan),contentPadding = PaddingValues(30.dp),//为内容设置外边距verticalArrangement = Arrangement.spacedBy(10.dp)//为每个item设置间隔) {items(1000){Text(text = "$it")}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/695607.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

​LeetCode解法汇总106. 从中序与后序遍历序列构造二叉树

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a; 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 描述&#xff1a; 给定两个…

如何使用ArcGIS Pro生成等高线

无论在制图还是规划中&#xff0c;经常会使用到等高线&#xff0c;大多数情况下&#xff0c;从网上获取的高程数据都是DEM文件&#xff0c;我们可以通过ArcGIS Pro来生成等高线&#xff0c;这里为大家介绍一下生成方法&#xff0c;希望能对你有所帮助。 数据来源 教程所使用的…

PHP WebSocket:技术解析与实用指南

本文旨在帮助初学者掌握在PHP中使用WebSocket的关键概念和技术。我们将深入讨论从建立连接、绑定到监听等各方面的操作&#xff0c;并提供易于理解和实践的指导。 一、socket协议的简介 WebSocket是什么&#xff0c;有什么优点 WebSocket是一个持久化的协议&#xff0c;这是…

洛谷 【算法1-2】排序

【算法1-2】排序 - 题单 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 鄙人不才&#xff0c;刷洛谷&#xff0c;迎蓝桥&#xff0c;【算法1-2】排序 已刷&#xff0c;现将 AC 代码献上&#xff0c;望有助于各位 P1271 选举学生会 【深基9.例1】选举学生会 - 洛谷 题目 解答…

二.西瓜书——线性模型、决策树

第三章 线性模型 1.线性回归 “线性回归”(linear regression)试图学得一个线性模型以尽可能准确地预测实值输出标记. 2.对数几率回归 假设我们认为示例所对应的输出标记是在指数尺度上变化&#xff0c;那就可将输出标记的对数作为线性模型逼近的目标&#xff0c;即 由此&…

投简历这样投就对了

相关文章 写一份让HR过目不忘的简历 后悔没有早点发现这篇嵌入式简历模板 了解校招类型 投简历这样投就对了 前言一、线上投简历需要注意的东西1.线上APP投递简历&#xff08;以BOSS为例&#xff09;&#xff08;1&#xff09;填好个人信息&#xff08;2&#xff09;注意打招呼…

堆的结构实现与应用

目录 前言: 1.认识堆 a.如何认识堆&#xff1f; b.大根堆与小根堆 c.堆应用的简单认识 2.堆的结构与要实现的功能 3.向上调整算法 4.向下调整算法 5.向堆插入数据并建堆 6.堆的大小 7.堆的判空 8.取堆顶数据 9.删除堆顶数据 10.向上调整时间复杂度 11.向下调整时…

rtsp推拉流

1.搭建视频服务器 smart-rtmpd: smart_rtmpd 是一款 rtmp、rtsp 服务器&#xff0c;非常好用&#xff0c;解压既运行&#xff0c;支持跨平台&#xff0c;无任何依赖&#xff0c;性能和 SRS 相比不分上下 2.推拉流 下载windows版本ffmpeg,并设置环境变量. 推流 ffmpeg -re -st…

170基于matlab的DNCNN图像降噪

基于matlab的DNCNN图像降噪&#xff0c;网络分为三部分&#xff0c;第一部分为ConvRelu&#xff08;一层&#xff09;&#xff0c;第二部分为ConvBNRelu&#xff08;若干层&#xff09;&#xff0c;第三部分为Conv&#xff08;一层&#xff09;&#xff0c;网络层数为17或者20层…

制造业客户数据安全解决方案(终端安全/文件加密/介质管理等)

针对前文制造业客户数据安全解决方案&#xff08;数据防泄密需求分析&#xff09;提到的泄密风险&#xff0c;本文详细介绍一套完整、合理的解决方案&#xff0c;通过该方案构建公司数据安全防护边界&#xff0c;自动加密、全方位保护数据安全。 PC端&#xff1a;https://isite…

VUE2整合markdown编辑器 mavon-editor

GITEE文档 文档中详细介绍了自定义工具栏等 toolbars: {bold: true, // 粗体italic: true, // 斜体header: true, // 标题underline: true, // 下划线strikethrough: true, // 中划线mark: true, // 标记superscript: true, // 上角标subscript: true, // 下角标quote: true, …

大气颗粒物与VOCs PMF源解析实践技术应用

目前&#xff0c;大气颗粒物和臭氧污染成为我国亟待解决的环境问题。颗粒物和臭氧污染不仅对气候和环境有重要影响&#xff0c;而且对人体健康有严重损害。而臭氧的前体物之一为挥发性有机物&#xff08;VOCs&#xff09;。为了高效、精准地治理区域大气颗粒物和臭氧污染&#…

[corCTF 2022] CoRJail: From Null Byte Overflow To Docker Escape

前言 题目来源&#xff1a;竞赛官网 – 建议这里下载&#xff0c;文件系统/带符号的 vmlinux 给了 参考 [corCTF 2022] CoRJail: From Null Byte Overflow To Docker Escape Exploiting poll_list Objects In The Linux Kernel – 原作者文章&#xff0c;poll_list 利用方式…

Linux 权限详解

目录 一、权限的概念 二、权限管理 三、文件访问权限的相关设置方法 3.1chmod 3.2chmod ax /home/abc.txt 一、权限的概念 Linux 下有两种用户&#xff1a;超级用户&#xff08; root &#xff09;、普通用户。 超级用户&#xff1a;可以再linux系统下做任何事情&#xff…

深信服技术认证“SCCA-C”划重点:深信服超融合HCI

为帮助大家更加系统化地学习云计算知识&#xff0c;高效通过云计算工程师认证&#xff0c;深信服特推出“SCCA-C认证备考秘笈”&#xff0c;共十期内容。“考试重点”内容框架&#xff0c;帮助大家快速get重点知识 划重点来啦 *点击图片放大展示 深信服云计算认证&#xff08;S…

Shell 脚本系列 | shell三剑客

目录 1、三剑客介绍2、三剑客之—grep1. 常用参数2. 常用示例1.过滤以#开头的行和空白行2.找出所有的mp3文件包含艺术家jayZ&#xff0c;不包含remix3.计算匹配项的数目4.在匹配字符串周围打印出行5.匹配显示所有IP 3、三剑客之一sed1.常用参数2.常用示例1. 奇数行后增加2. 删除…

http协议工具:apache详解

目录 一、常见的http服务程序 1、 Apache HTTP Server 介绍 1.1 apache 概念 1.2 apache 功能 1.3 apache 特性 2、MPM&#xff08;multi-processing module&#xff09;工作模式 2.1 prefork 2.2 worker 2.3 event 二、Apache HTTP Server安装和相关文件 1、安装方…

MySQL|MySQL基础(求知讲堂-学习笔记【详】)

MySQL基础 目录 MySQL基础一、 MySQL的结构二、 管理数据库1&#xff09;查询所有的数据库2&#xff09;创建数据库3&#xff09;修改数据库的字符编码4&#xff09;删除数据库5&#xff09;切换操作的数据库 三、表的概念四、字段的数据类型4.1 整型4.2 浮点型(float和double)…

Linux密码重置不求人:三种方法教你轻松搞定普通用户密码更改

在Linux服务器管理中&#xff0c;为普通用户设置和管理密码是一项基础且重要的任务。通过为普通用户设置登录密码&#xff0c;可以确保系统的安全性和用户访问的合法性。本文将详细介绍在Linux系统中&#xff0c;如何通过三种不同的方法为普通用户设置登录密码。 Linux下&…

基于 java springboot+layui仓库管理系统

基于 java springbootlayui仓库管理系统设计和实现 博主介绍&#xff1a;5年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言 文末获取源…