Jetpack Compose学习笔记——UI组件

Jetpack Compose学习笔记——UI组件

Modifier

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

操作符	参数	示例
.size	width,height
	size
.width	width
.clip	shape	CircleShape,RoundedCornerShape(size)
.background	color,shape	Color.Red/Color(color) //ARGB
.height	height
	brush	Brush.verticalGradient(colors=listof(Color.Red,Color.Yellow))
.align*	alignment	Alignment.Center
.fillMaxSize*
.fillMaxHeight*
.fillMaxWidth*
.border	width,color,shape
	brush
.padding	all
	horizontal,vertical
	top,bottom,start,end
.offset	x,y
.matchParentSize*(B)
.fillMaxSize
.fillMaxHeight
.fillMaxWidth
.wight*(R/C)	wight	1f

基础组件

文字组件

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

图片组件

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

按钮组件

组件	常用参数	示例
Button	onClick:()->Unit,colors	Button(colors=ButtonDefaults.buttonColors(backgroundColor = xx)){Text()//rowScope}
IconButton	onClick:()->Unit	IconButton(οnclick={}){Icon()}
FloatingActionButton	onClick:()->Unit	FloatingActionButton(οnclick={}){Icon()}
ExtendedFloatingActionButton	onClick:()->Unit,icon:@Composable()->Unit,text:@Composable()->Unit

选择器

组件	常用参数	示例
Checkbox	checked,onCheckedChange:(Boolean)->Unit,colors	colors=CheckboxDefaults.colors( checkmarkColor=xx)
TriStateCheckBox	state,onclick,colors	state=ToggleableState.On/Off/Indeterminate
Switch	checked,onCheckedChange:(Boolean)->Unit,colors
Slider	value,onvalueChange:(Float)->Unit,steps,colors,valueRange=0f…1f

对话框

组件	常用参数	示例
Dialog	onDismissResqueset:()->Unit,properties	properties=DialogProperties(usePlatformDefaultWidth=false)
AlertDialog	onDismissResqueset:()->Unit,title:@Composable()->Unit,text:@Composable()->Unit,confirmButton:@Composable()->Unit,dismissButton:@Composable()->Unit
CircularProgressIndicator	progress	val animatedProgress by animateFloatAsState(targetValue=progress,animationSpec=ProgressIndicatorDefaults.ProgressAnimationSpec)
LinearProgressIndicator	progress

布局组件

线性布局

布局	常用参数	示例
Column	vecticalArrangement,horizontalAlignment	Aligment.Start
	Modifier.fillMaxSize().background(xx).padding(xx)
Row	vecticalAlignment,horizontalArrangement	Arrangement.Center/Start/End/SpaceBetween/SpaceEvenly

帧布局

布局	常用参数
Box	contentAlignment
	Modifier.fillMaxWidth().height(32.dp)
Surface(解耦Modifier)	shape,elevation
Card	shape,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
}

约束	创建
Barrier	createEndBarrier(ref1,ref2)
Guildline	createGuidelineFromTop(weight:Float)
Chain	createVerticalChain(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 ->
		...
	}
	
}