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

news2024/11/10 13:46:50

在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输入框案例如下:

    @Composable
        fun 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修饰符化身为可点击组件。
      案例如下:
        @Composable
        fun ButtonSample(){
            val interactionSource = remember {
                MutableInteractionSource()
            }
            val pressState = interactionSource.collectIsPressedAsState()
            val borderColor = if (pressState.value) Color.Green else Color.White
            Button(
             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悬浮按钮
        @Composable
        fun 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复选框
        @Composable
        fun ChecBoxDemo(){
            val checkedState = remember {
                mutableStateOf(true)
            }
            Checkbox(
                checked = checkedState.value,
                onCheckedChange ={checkedState.value = it},
            colors = CheckboxDefaults.colors(checkedColor =  Color(0xff0079d3)))
        }
    
    1. TriStateCheckBox三态选择框
      很多时候,我们的复选框会有很多个,并且希望能够统一选择或者取消,这个时候就可以使用三态选择框
     @Composable
        fun ChecBoxDemo(){
            val (state,onStateChange) = remember { mutableStateOf(true) }
            val (state2,onStateChange2) = remember { mutableStateOf(true) }
    
            val parentState = remember(state,state2) {
                if (state&&state2) ToggleableState.On
                else if (!state&&!state2) ToggleableState.Off
                else ToggleableState.Indeterminate
            }
    
            val onParentClick = {
                val s = parentState != ToggleableState.On
                onStateChange(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单选开关——控制单个项目的开启或关闭状态
      @Composable
        fun 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. 对话框
        @Composable
        fun DialogDemo(){
            val openDialog = remember {
                mutableStateOf(true)
            }
            val dialogWidth = 200.dp
            val dialogHeight = 50.dp
            if(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做如下封装,可以更方便地用在水平或垂直布局中。

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

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

        @SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
        @OptIn(ExperimentalMaterial3Api::class)
        @Composable
        fun 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方法来让列表实现滑动。

    @Composable
    fun 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.coloradmin.cn/o/1461805.html

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

相关文章

【Linux】日志命令行练习(持续更新)

文章目录 前言环境情景1. 获取实时日志2. 关键字定位3. 关键字取并集4. 关键字取交集5. 关键字取差集6. 关键字实时日志捕获7. 关键词上下文打印8. 关键词滚动搜索9. 看最早的日志信息 前言 公司生产问题需要登录堡垒机排查。 没有日志平台的情况下&#xff0c;生产问题同样要…

maven工程打包引入本地jar包

1、通过maven生成本地区仓库包 mvn install:install-file --settings D:\lkx\download\apache-maven-3.6.3\conf\settings.xml -Dfileaspose-cad-21.8.jar -DartifactIdaspose-cad -DgroupIdsystem.core -Dversion21.8 -Dpackagingjar -DgeneratePomtrue # --settings&#xf…

迈向三维:vue3+Cesium.js三维WebGIS项目实战--持续更新中

写在前面&#xff1a;随着市场对数字孪生的需求日益增多&#xff0c;对于前端从业者的能力从对框架vue、react的要求&#xff0c;逐步扩展到2D、3D空间的交互&#xff0c;为用户提供更紧密的立体交互。近年来前端对GIS的需求日益增多。本文将记录WebGIS的学习之旅&#xff0c;从…

回归分析中的异方差性

在简单线性回归或多元线性回归中&#xff0c;我们对误差项做了一些基本假设。 简单线性回归&#xff1a; 多元线性回归&#xff1a; 假设条件&#xff1a; 1.误差均值为零 2.误差具有恒定方差 3.误差不相关 4.误差呈正态分布 第2个假设称为同方差性&#xff0c;因此&…

【开源】JAVA+Vue.js实现大病保险管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统配置维护2.2 系统参保管理2.3 大病保险管理2.4 大病登记管理2.5 保险审核管理 三、系统详细设计3.1 系统整体配置功能设计3.2 大病人员模块设计3.3 大病保险模块设计3.4 大病登记模块设计3.5 保险审核模块设计 四、…

使用JDBC操作数据库(IDEA编译器)

目录 JDBC的本质 ​ JDBC好处 JDBC操作MySQL数据库 1.创建工程导入驱动jar包 2.编写测试代码 ​相关问题 JDBC的本质 官方(sun公司) 定义的一套操作所有关系型数据库的规则&#xff0c;即接口各个数据库厂商去实现这套接口&#xff0c;提供数据库驱动jar包我们可以使用这…

Docker Desktop 4.27.1 Windows 10 安装 教程

Docker Desktop 4.27.1 Windows 10 安装 版本要求windows 版本要求wsl 版本要求docker desktop 版本 安装首先确保系统版本符合要求前提下安装wsl安装 Dockers Desktop安装说明 安装问题docker Desktop 无法正常启动&#xff0c;提示wsl 相关信息wsl --install 执行输出帮助日志…

Stable Diffusion 模型下载:A-Zovya RPG Artist Tools(RPG 大师工具箱)

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八 下载地址 模型介绍 A-Zovya RPG Artist Tools 模型是一个针对 RPG 训练的一个模型&#xff0c;可以生成一些 R…

【深度学习】微调Qwen1.8B

1.前言 使用地址数据微调Qwen1.8B。Qwen提供了预构建的Docker镜像&#xff0c;在使用时获取镜像只需安装驱动、下载模型文件即可启动Demo、部署OpenAI API以及进行微调。 github地址&#xff1a;GitHub - QwenLM/Qwen: The official repo of Qwen (通义千问) chat & pretr…

Maven的下载安装配置教程

一、简单了解一下什么是Maven Maven就是一款帮助程序员构建项目的工具&#xff0c;我们只需要告诉Maven需要哪些Jar 包&#xff0c;它会帮助我们下载所有的Jar&#xff0c;极大提升开发效率。 1.Maven翻译为“专家“&#xff0c; ”内行”的意思&#xff0c;是著名Apache公司下…

通过盲注脚本复习sqllabs第46关order by 注入

在MySQL支持使用ORDER BY语句对查询结果集进行排序处理&#xff0c;使用ORDER BY语句不仅支持对单列数据的排序&#xff0c;还支持对数据表中多列数据的排序。语法格式如下 select * from 表名 order by 列名(或者数字) asc&#xff1b;升序(默认升序) select * from 表名 or…

将一个 PostgreSQL 数据库复制到另一个数据库中

以管理员身份进入cmd窗口&#xff0c;输入如下命令 语法&#xff1a; pg_dump -C -h 本机IP -U 本机postgresql用户名 源数据库名 | psql -h 服务器IP -U 服务器postgresql用户名 目标数据库名 示例&#xff1a; pg_dump -C -h 127.0.0.1 -U postgres test01-dbname | psql…

顺序表详解(如何实现顺序表)

文章目录 前言 在进入顺序表前&#xff0c;我们先要明白&#xff0c;数据结构的基本概念。 一、数据结构的基本概念 1.1什么是数据结构 数据结构是由“数据”和“结构”两词组合而来。所谓数据就是&#xff1f;常见的数值1、2、3、4.....、姓名、性别、年龄&#xff0c;等。…

高维数据的中介效应【中介分析】《R包:HIMA》

允许基于高级中介筛选和惩罚回归技术来估计和测试高维中介效应 Hima包浏览 高维中介示意图 图1. 在暴露和结果之间有高维中介的情况 本包的作用 在确定独立筛选和极小极大凹惩罚技术的基础上&#xff0c;采用联合显著性检验方法对调解效果进行检验。使用蒙特卡罗模拟研究来展…

C#知识点-15(匿名函数、使用委托进行窗体传值、反射)

匿名函数 概念&#xff1a;没有名字的函数&#xff0c;一般情况下只调用一次。它的本质就是一个方法&#xff0c;虽然我们没有定义这个方法&#xff0c;但是编译器会把匿名函数编译成一个方法 public delegate void Del1();//无参数无返回值的委托public delegate void Del2(s…

Java SE 入门到精通—基础语法【Java】

敲重点&#xff01; 本篇讲述了比较重要的基础&#xff0c;是必须要掌握的 1.程序入口 在Java中&#xff0c;main方法是程序的入口点&#xff0c;是JVM&#xff08;Java虚拟机&#xff09;执行Java应用程序的起始点。 main方法的方法签名必须遵循下面规范&#xff1a; publ…

TestNG与ExtentReport单元测试导出报告文档

TestNG与ExtentReport集成 目录 1 通过实现ITestListener的方法添加Reporter log 1.1 MyTestListener设置 1.2 输出结果 2 TestNG与ExtentReporter集成 2.1 项目结构 2.2 MyExtentReportListener设置 2.3 单多Suite、Test组合测试 2.3.1 单Suite单Test 2.3…

Java实现实验室耗材管理系统 JAVA+Vue+SpringBoot+MySQL

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 耗材档案模块2.2 耗材入库模块2.3 耗材出库模块2.4 耗材申请模块2.5 耗材审核模块 三、系统展示四、核心代码4.1 查询耗材品类4.2 查询资产出库清单4.3 资产出库4.4 查询入库单4.5 资产入库 五、免责说明 一、摘要 1.1…

WebSocket实现聊天

基于webSocket通信的库主要有 socket.io&#xff0c;SockJS&#xff0c;这次用的是 SockJS。 这里我们使用sockjs-client、stomjs这两个模块&#xff0c;要实现webSocket通信&#xff0c;需要后台配合&#xff0c;也使用相应的模块。 WebSocket 1、http&#xff1a;http超文…

War Robots可以使用5347的卡支付

很多小伙伴想使用War Robots&#xff0c;但是不知道怎么弄&#xff0c;方法比较可靠&#xff0c;亲测有效~~~ 可以使用Fomepay的5347的卡支付 卡片cvc就是卡密&#xff0c;在首页点击更多时可以查看