Jetpack Compose学习笔记——UI组件

Jetpack Compose学习笔记——UI组件

Modifier

执行顺序:Modifer.first().second()

操作符参数示例
.sizewidth,height
size
.widthwidth
.clipshapeCircleShape,RoundedCornerShape(size)
.backgroundcolor,shapeColor.Red/Color(color) //ARGB
.heightheight
brushBrush.verticalGradient(colors=listof(Color.Red,Color.Yellow))
.align*alignmentAlignment.Center
.fillMaxSize*
.fillMaxHeight*
.fillMaxWidth*
.borderwidth,color,shape
brush
.paddingall
horizontal,vertical
top,bottom,start,end
.offsetx,y
.matchParentSize*(B)
.fillMaxSize
.fillMaxHeight
.fillMaxWidth
.wight*(R/C)wight1f

基础组件

文字组件

组件常用参数示例
Texttext,style,color,maxLines,overflowtext=stringResourcde(R.string.xx)/“xxx”
style=TextStyle(fontSize,letterSpacing,fontFamily,fontWeight)
overflow=TextOverflow.Ellipsis
text=buildAnnotatedString{withStyle(style=SpanStyle/ParagraphStyle()){append(“”)}}
textDecorationtextDecoration=TextDecoration.Underline
ClickableTextonclick:(offset) -> Unitοnclick={offset->annotatedText.getStringAnnotations(tag=“”,start=offset,end=offset).firstOrNull()?.let{annotation->xx(annotation.item)}}
SelectionContainerSelectionContainer{Text()}
TextFieldvalue,onValueChange:(value)->Unit,label:@Composable()->Unitvalue=text,onValueChange={text=it},label={Text()}
leadingIcon,tailingIcon:@Composable()->Unit
OutlinedTextFieldvalue,onValueChange:(value)->Unit,label:@Composable()->Unit,placeholder:@Composable()->Unit
BasicTextFieldvalue,onValueChange:(value)->Unit
decorationBox:@Composable(innerTextField)->UnitdecorationBox={innerTextField->Box{if(text.isEmpty(){Text()}innerTextFiled()}

图片组件

组件常用参数示例
IconcontentDescription,tint
imageVector:ImageVectorimageVector=ImageVector.vectorResource(id=R.drawable.xxx)
bitmap:ImageBitmapbitmap=ImageBitmap.imageResource(id=R.drawable.xxx)
painter:Painterpainter=PainterResource(id=R.drawable.xxx)
Icons.Filled.Favorite
Imagepainter,contentDescription,alignment,contentScalecontentScale=ContentScale.Crop(居中裁剪)/Fit/FillHeight/FillWidth/Inside/None/FillBounds
colorFilter

按钮组件

组件常用参数示例
ButtononClick:()->Unit,colorsButton(colors=ButtonDefaults.buttonColors(backgroundColor = xx)){Text()//rowScope}
IconButtononClick:()->UnitIconButton(οnclick={}){Icon()}
FloatingActionButtononClick:()->UnitFloatingActionButton(οnclick={}){Icon()}
ExtendedFloatingActionButtononClick:()->Unit,icon:@Composable()->Unit,text:@Composable()->Unit

选择器

组件常用参数示例
Checkboxchecked,onCheckedChange:(Boolean)->Unit,colorscolors=CheckboxDefaults.colors( checkmarkColor=xx)
TriStateCheckBoxstate,onclick,colorsstate=ToggleableState.On/Off/Indeterminate
Switchchecked,onCheckedChange:(Boolean)->Unit,colors
Slidervalue,onvalueChange:(Float)->Unit,steps,colors,valueRange=0f…1f

对话框

组件常用参数示例
DialogonDismissResqueset:()->Unit,propertiesproperties=DialogProperties(usePlatformDefaultWidth=false)
AlertDialogonDismissResqueset:()->Unit,title:@Composable()->Unit,text:@Composable()->Unit,confirmButton:@Composable()->Unit,dismissButton:@Composable()->Unit
CircularProgressIndicatorprogressval animatedProgress by animateFloatAsState(targetValue=progress,animationSpec=ProgressIndicatorDefaults.ProgressAnimationSpec)
LinearProgressIndicatorprogress

布局组件

线性布局

布局常用参数示例
ColumnvecticalArrangement,horizontalAlignmentAligment.Start
Modifier.fillMaxSize().background(xx).padding(xx)
RowvecticalAlignment,horizontalArrangementArrangement.Center/Start/End/SpaceBetween/SpaceEvenly

帧布局

布局常用参数
BoxcontentAlignment
Modifier.fillMaxWidth().height(32.dp)
Surface(解耦Modifier)shape,elevation
Cardshape,elevation

Spacer留白

Spacer(modifier=Modifier.width().height())

约束布局

创建和绑定引用:

val imageRef = remember {createRef()}
val (imageRef, textRef) = remember {createRefs()}

modifer = Modifier.constrainAs(imageRef) {
    top.linkTo(parent.top)
    start.linkTo(textRef.end, 10.dp)
    width = Dimension.preferredWrapContent
}
约束创建
BarriercreateEndBarrier(ref1,ref2)
GuildlinecreateGuidelineFromTop(weight:Float)
ChaincreateVerticalChain(ref1,ref2,chainStyle=ChainStyle.Spread/SpreadInside/Packed)

Scaffold脚手架

val scaffoldState = rememberScaffoldState()
val scope = rememberCoroutineScope()

Scaffold(
	topBar = {
        TopAppBar(
        	title = {
                Text("")
            },
            navigationIcon = {
                IconButton(
                	onClick = { }
                ) {
                    Icon(...)
                }
            }
        )
    },
    bottomBar = {
        ButtonNavigation {
            items.forEachIndexed {index, item ->
        		ButtomNavigationItem(
                	selected = ..,
                    onClick = { },
                    icon = {Icon(..)},
                    alwaysShowLabel = ..,
                    label = {Text(..)}
                )
        	}
        }
    },
    drawerContent = {
        
    },
    scaffoldState = scaffoldState
) {
    
}
BackHandler(
	enabled = scaffoldState.drawerState.isOpen
) {
    scope.launch {
        scaffoldState.drawerState.close()
    }
}

列表

DropdownMenu

DropdownMenu(
	expanded = ..,
	onDismissResquest = ..	
) {
    Column {
        options.forEach {option ->
        	ListItem(text = {Text("")})
        }
    }
}

LazyComposables

LazyColumn(
	contentPadding = PaddingValues(35.dp),
	verticalArrangement = Arrangement.spaceBy(10.dp)
) {
	item {
		Text("")
	}
	items(5) { index ->
		...
	}
	items(List<T>) { option ->
		...
	}
	
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值