mirror of
https://github.com/BetterAndroid/FlexiUI.git
synced 2025-09-08 11:34:18 +08:00
style: merge to official recommended compose style
This commit is contained in:
@@ -266,7 +266,9 @@ interface AppBarScope {
|
||||
val iconInflateSize = impl.style.actionIconSize + impl.style.actionIconPadding
|
||||
IconButton(
|
||||
onClick = onClick,
|
||||
modifier = Modifier.size(iconInflateSize).then(modifier),
|
||||
modifier = Modifier
|
||||
.size(iconInflateSize)
|
||||
.then(modifier),
|
||||
colors = colors,
|
||||
style = style,
|
||||
enabled = enabled,
|
||||
@@ -303,7 +305,8 @@ private class AppBarImpl(
|
||||
) {
|
||||
val actionContentMaxWidth = if (actions != null) style.actionContentMaxWidth else 0.dp
|
||||
Row(
|
||||
modifier = Modifier.padding(end = style.contentSpacing)
|
||||
modifier = Modifier
|
||||
.padding(end = style.contentSpacing)
|
||||
.widthIn(max = contentMaxWidth - actionContentMaxWidth),
|
||||
horizontalArrangement = Arrangement.spacedBy(style.contentSpacing),
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
|
@@ -117,12 +117,14 @@ fun Button(
|
||||
backgroundColor = Color.Transparent
|
||||
)
|
||||
Box(
|
||||
modifier = Modifier.button(
|
||||
modifier = Modifier
|
||||
.button(
|
||||
enabled = enabled,
|
||||
colors = colors,
|
||||
style = style,
|
||||
then = modifier
|
||||
).rippleClickable(
|
||||
)
|
||||
.rippleClickable(
|
||||
rippleStyle = style.rippleStyle,
|
||||
enabled = enabled,
|
||||
role = Role.Button,
|
||||
@@ -171,18 +173,21 @@ fun IconButton(
|
||||
content: @Composable () -> Unit
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier.button(
|
||||
modifier = Modifier
|
||||
.button(
|
||||
enabled = enabled,
|
||||
colors = colors,
|
||||
style = style,
|
||||
then = modifier
|
||||
).rippleClickable(
|
||||
)
|
||||
.rippleClickable(
|
||||
rippleStyle = style.rippleStyle,
|
||||
enabled = enabled,
|
||||
role = Role.Button,
|
||||
interactionSource = interactionSource,
|
||||
onClick = onClick
|
||||
).padding(style.padding),
|
||||
)
|
||||
.padding(style.padding),
|
||||
contentAlignment = Alignment.Center,
|
||||
) { IconButtonStyle(colors, content) }
|
||||
}
|
||||
@@ -212,19 +217,22 @@ fun IconToggleButton(
|
||||
content: @Composable () -> Unit
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier.button(
|
||||
modifier = Modifier
|
||||
.button(
|
||||
enabled = enabled,
|
||||
colors = colors,
|
||||
style = style,
|
||||
then = modifier
|
||||
).rippleToggleable(
|
||||
)
|
||||
.rippleToggleable(
|
||||
value = checked,
|
||||
rippleStyle = style.rippleStyle,
|
||||
onValueChange = onCheckedChange,
|
||||
enabled = enabled,
|
||||
role = Role.Checkbox,
|
||||
interactionSource = interactionSource
|
||||
).padding(style.padding),
|
||||
)
|
||||
.padding(style.padding),
|
||||
contentAlignment = Alignment.Center
|
||||
) { IconButtonStyle(colors, content) }
|
||||
}
|
||||
@@ -304,11 +312,13 @@ object ButtonDefaults {
|
||||
*/
|
||||
@Composable
|
||||
fun style(
|
||||
rippleStyle: RippleStyle = InteractionDefaults.rippleStyle(color = when {
|
||||
rippleStyle: RippleStyle = InteractionDefaults.rippleStyle(
|
||||
color = when {
|
||||
LocalPrimaryButton.current -> ButtonProperties.PrimaryRippleColor
|
||||
LocalInAreaBox.current -> ButtonProperties.RippleColor
|
||||
else -> ButtonProperties.PrimaryRippleColor
|
||||
}.toColor()),
|
||||
}.toColor()
|
||||
),
|
||||
padding: ComponentPadding = ButtonProperties.Padding.toPadding(),
|
||||
shape: Shape = AreaBoxDefaults.childShape(),
|
||||
borderWidth: Dp = ButtonProperties.BorderWidth.toDp()
|
||||
|
@@ -117,9 +117,15 @@ fun CheckBox(
|
||||
val animatedContentScale by animateFloatAsState(if (hovered) style.hoveredGain else 1f)
|
||||
val animatedContentAlpha by animateFloatAsState(if (checked) 1f else 0f)
|
||||
val animatedContentLayer by animateFloatAsState(if (checked) 1f else 0f)
|
||||
Row(modifier = Modifier.componentState(enabled).then(modifier), verticalAlignment = Alignment.CenterVertically) {
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.componentState(enabled)
|
||||
.then(modifier),
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier.clickable(
|
||||
modifier = Modifier
|
||||
.clickable(
|
||||
interactionSource = interactionSource,
|
||||
enabled = enabled,
|
||||
role = Role.Checkbox
|
||||
@@ -131,7 +137,8 @@ fun CheckBox(
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
Icon(
|
||||
modifier = Modifier.size(style.contentSize)
|
||||
modifier = Modifier
|
||||
.size(style.contentSize)
|
||||
.scale(animatedContentScale)
|
||||
.alpha(animatedContentAlpha)
|
||||
.graphicsLayer(
|
||||
|
@@ -250,9 +250,9 @@ fun DropdownList(
|
||||
) {
|
||||
Box(modifier = Modifier.weight(1f, needInflatable)) { text() }
|
||||
Icon(
|
||||
modifier = Modifier.graphicsLayer {
|
||||
rotationZ = animatedDirection
|
||||
}.size(style.endIconSize),
|
||||
modifier = Modifier
|
||||
.graphicsLayer { rotationZ = animatedDirection }
|
||||
.size(style.endIconSize),
|
||||
imageVector = FlexiIcons.Dropdown,
|
||||
style = IconDefaults.style(tint = animatedEndIconTint)
|
||||
)
|
||||
@@ -261,7 +261,9 @@ fun DropdownList(
|
||||
expanded = expanded,
|
||||
onDismissRequest = { onExpandedChange(false) },
|
||||
offset = DpOffset(-style.padding.start, style.padding.end),
|
||||
modifier = Modifier.width(menuMaxWidth).heightIn(max = menuMaxHeight),
|
||||
modifier = Modifier
|
||||
.width(menuMaxWidth)
|
||||
.heightIn(max = menuMaxHeight),
|
||||
colors = menuColors,
|
||||
style = menuStyle,
|
||||
scrollState = scrollState,
|
||||
@@ -405,7 +407,8 @@ fun DropdownMenuItem(
|
||||
?: LocalDropdownMenuContentShape.current
|
||||
?: DropdownMenuDefaults.style().contentShape
|
||||
AreaRow(
|
||||
modifier = Modifier.componentState(enabled)
|
||||
modifier = Modifier
|
||||
.componentState(enabled)
|
||||
.then(modifier)
|
||||
.fillMaxWidth()
|
||||
.sizeIn(
|
||||
@@ -473,7 +476,8 @@ private fun DropdownMenuContent(
|
||||
}
|
||||
) { if (it) 1f else 0f }
|
||||
AreaColumn(
|
||||
modifier = modifier.width(IntrinsicSize.Max)
|
||||
modifier = modifier
|
||||
.width(IntrinsicSize.Max)
|
||||
.verticalScroll(scrollState),
|
||||
initializer = {
|
||||
graphicsLayer {
|
||||
|
@@ -110,7 +110,8 @@ fun Icon(
|
||||
}
|
||||
else Modifier
|
||||
Box(
|
||||
modifier = modifier.toolingGraphicsLayer()
|
||||
modifier = modifier
|
||||
.toolingGraphicsLayer()
|
||||
.defaultSizeFor(currentStyle, painter)
|
||||
.paint(
|
||||
painter,
|
||||
|
@@ -115,7 +115,9 @@ fun NavigationBarRow(
|
||||
) {
|
||||
NavigationBarStyleBox(modifier, horizontal = true, colors, style) {
|
||||
AreaRow(
|
||||
modifier = Modifier.fillMaxWidth().selectableGroup(),
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.selectableGroup(),
|
||||
colors = AreaBoxDefaults.colors(
|
||||
backgroundColor = colors.backgroundColor,
|
||||
borderColor = colors.borderColor
|
||||
@@ -153,7 +155,9 @@ fun NavigationBarColumn(
|
||||
) {
|
||||
NavigationBarStyleBox(modifier, horizontal = false, colors, style) {
|
||||
AreaColumn(
|
||||
modifier = Modifier.fillMaxWidth().selectableGroup(),
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.selectableGroup(),
|
||||
colors = AreaBoxDefaults.colors(
|
||||
backgroundColor = colors.backgroundColor,
|
||||
borderColor = colors.borderColor
|
||||
@@ -219,7 +223,8 @@ fun NavigationBarItem(
|
||||
val currentIconStyle = LocalIconStyle.current.copy(tint = animatedContentColor)
|
||||
val currentTextStyle = LocalTextStyle.current.copy(color = animatedContentColor)
|
||||
Box(
|
||||
modifier = Modifier.componentState(enabled)
|
||||
modifier = Modifier
|
||||
.componentState(enabled)
|
||||
.clip(currentContentShape)
|
||||
.then(modifier)
|
||||
.background(animatedIndicatorColor)
|
||||
|
@@ -119,20 +119,28 @@ fun RadioButton(
|
||||
val animatedContentScale by animateFloatAsState(if (hovered) style.hoveredGain else 1f)
|
||||
val animatedContentShadow by animateDpAsState(if (selected) style.contentShadowSize else 0.dp)
|
||||
val animatedContentAlpha by animateFloatAsState(if (selected) 1f else 0f)
|
||||
Row(modifier = Modifier.componentState(enabled).then(modifier), verticalAlignment = Alignment.CenterVertically) {
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.componentState(enabled)
|
||||
.then(modifier),
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier.clickable(
|
||||
modifier = Modifier
|
||||
.clickable(
|
||||
interactionSource = interactionSource,
|
||||
enabled = enabled,
|
||||
role = Role.RadioButton,
|
||||
onClick = onClick
|
||||
).size(strokeDiameter)
|
||||
)
|
||||
.size(strokeDiameter)
|
||||
.scale(animatedStrokeScale)
|
||||
.background(animatedColor, style.shape),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier.size(contentDiameter)
|
||||
modifier = Modifier
|
||||
.size(contentDiameter)
|
||||
.scale(animatedContentScale)
|
||||
.shadow(animatedContentShadow, style.shape)
|
||||
.alpha(animatedContentAlpha)
|
||||
|
@@ -68,7 +68,9 @@ fun Scaffold(
|
||||
content: @Composable (innerPadding: ComponentPadding) -> Unit
|
||||
) {
|
||||
Surface(
|
||||
modifier = Modifier.fillMaxSize().then(modifier),
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.then(modifier),
|
||||
colors = colors,
|
||||
padding = ComponentPadding.None
|
||||
) {
|
||||
|
@@ -213,9 +213,13 @@ private fun SliderLayout(
|
||||
@Composable
|
||||
fun Track(content: @Composable () -> Unit) {
|
||||
val cornerSize = (style.trackShape as? CornerBasedShape)?.topStart?.toPx(Size.Zero, LocalDensity.current) ?: 0f
|
||||
Box(modifier = Modifier.width(trackWidth), contentAlignment = Alignment.Center) {
|
||||
Box(
|
||||
modifier = Modifier.size(trackAdoptWidth, style.trackHeight)
|
||||
modifier = Modifier.width(trackWidth),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.size(trackAdoptWidth, style.trackHeight)
|
||||
.background(colors.trackInactiveColor, style.trackShape)
|
||||
.borderOrElse(style.trackBorderWidth, colors.trackBorderColor, style.trackShape)
|
||||
.drawWithContent {
|
||||
@@ -238,9 +242,9 @@ private fun SliderLayout(
|
||||
horizontalArrangement = Arrangement.SpaceBetween,
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
for (i in 0 until steps + 2)
|
||||
Box(
|
||||
modifier = Modifier.size(style.trackHeight)
|
||||
for (i in 0 until steps + 2) Box(
|
||||
modifier = Modifier
|
||||
.size(style.trackHeight)
|
||||
.background(colors.stepColor, style.stepShape)
|
||||
.borderOrElse(style.stepBorderWidth, colors.stepBorderColor, style.stepShape)
|
||||
)
|
||||
@@ -251,7 +255,8 @@ private fun SliderLayout(
|
||||
@Composable
|
||||
fun Thumb() {
|
||||
Box(
|
||||
modifier = Modifier.size(thumbDiameter)
|
||||
modifier = Modifier
|
||||
.size(thumbDiameter)
|
||||
.offset { IntOffset(adoptedOffsetX.roundToInt(), 0) }
|
||||
.scale(animatedScale)
|
||||
.shadow(style.thumbShadowSize, style.thumbShape)
|
||||
@@ -286,7 +291,8 @@ private fun SliderLayout(
|
||||
)
|
||||
}
|
||||
Box(
|
||||
modifier = Modifier.componentState(enabled)
|
||||
modifier = Modifier
|
||||
.componentState(enabled)
|
||||
.then(modifier)
|
||||
.hoverable(interactionSource, enabled)
|
||||
.pointerInput(Unit) {
|
||||
|
@@ -98,7 +98,8 @@ fun StickyHeaderBar(
|
||||
val iconStyle = IconDefaults.style(size = style.iconSize, tint = colors.iconTint)
|
||||
val textStyle = style.textStyle.copy(color = colors.textColor)
|
||||
Box(
|
||||
modifier = Modifier.clip(style.iconShape)
|
||||
modifier = Modifier
|
||||
.clip(style.iconShape)
|
||||
.background(colors.iconBackgroundColor)
|
||||
.padding(style.iconPadding)
|
||||
) {
|
||||
|
@@ -148,7 +148,8 @@ fun Switch(
|
||||
@Composable
|
||||
fun Track(content: @Composable RowScope.() -> Unit) {
|
||||
Row(
|
||||
modifier = Modifier.clickable(
|
||||
modifier = Modifier
|
||||
.clickable(
|
||||
interactionSource = interactionSource,
|
||||
enabled = enabled,
|
||||
role = Role.Switch
|
||||
@@ -156,7 +157,8 @@ fun Switch(
|
||||
distance = maxOffsetX
|
||||
offsetX = if (checked) 0f else maxOffsetX
|
||||
onCheckedChange(!checked)
|
||||
}.background(if (efficientDragging) trackColor else animatedTrackColor, style.trackShape)
|
||||
}
|
||||
.background(if (efficientDragging) trackColor else animatedTrackColor, style.trackShape)
|
||||
.borderOrElse(style.trackBorderWidth, colors.trackBorderColor, style.trackShape)
|
||||
.size(style.trackWidth, style.trackHeight)
|
||||
.padding(style.padding),
|
||||
@@ -169,7 +171,8 @@ fun Switch(
|
||||
@Composable
|
||||
fun Thumb() {
|
||||
Box(
|
||||
modifier = Modifier.size(thumbDiameter)
|
||||
modifier = Modifier
|
||||
.size(thumbDiameter)
|
||||
.offset { IntOffset((if (efficientDragging) offsetX else animatedOffsetX).roundToInt(), 0) }
|
||||
.scale(animatedScale)
|
||||
.shadow(style.thumbShadowSize, style.thumbShape)
|
||||
@@ -208,7 +211,11 @@ fun Switch(
|
||||
)
|
||||
)
|
||||
}
|
||||
Box(modifier = Modifier.componentState(enabled).then(modifier)) { Track { Thumb() } }
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.componentState(enabled)
|
||||
.then(modifier)
|
||||
) { Track { Thumb() } }
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -239,7 +246,8 @@ fun SwitchItem(
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier.componentState(enabled)
|
||||
modifier = Modifier
|
||||
.componentState(enabled)
|
||||
.weight(1f)
|
||||
.clickable(enabled = enabled) { onCheckedChange(!checked) }
|
||||
) { content() }
|
||||
|
@@ -126,7 +126,11 @@ fun TabRow(
|
||||
tabs: @Composable () -> Unit
|
||||
) {
|
||||
TabStyleBox(modifier, colors, style) {
|
||||
SubcomposeLayout(Modifier.fillMaxWidth().selectableGroup()) { constraints ->
|
||||
SubcomposeLayout(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.selectableGroup()
|
||||
) { constraints ->
|
||||
val maximumConstraints = Constraints()
|
||||
val tabRowWidth = constraints.maxWidth
|
||||
val tabMeasurables = subcompose(TabSlots.Tabs, tabs)
|
||||
@@ -181,7 +185,8 @@ fun ScrollableTabRow(
|
||||
TabStyleBox(modifier, colors, style) {
|
||||
val scrollableTabData = rememberScrollableTabData(scrollState)
|
||||
SubcomposeLayout(
|
||||
modifier = Modifier.fillMaxWidth()
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.wrapContentSize(align = Alignment.CenterStart)
|
||||
.horizontalScroll(scrollState)
|
||||
.selectableGroup()
|
||||
@@ -264,7 +269,8 @@ fun Tab(
|
||||
LocalTextStyle provides contentTextStyle
|
||||
) {
|
||||
Row(
|
||||
modifier = Modifier.componentState(enabled)
|
||||
modifier = Modifier
|
||||
.componentState(enabled)
|
||||
.clip(currentContentShape)
|
||||
.then(modifier)
|
||||
.rippleClickable(
|
||||
|
@@ -167,7 +167,9 @@ fun Text(
|
||||
BasicText(
|
||||
text = text,
|
||||
modifier = modifier,
|
||||
style = currentStyle.copy(color = currentColor).merge(
|
||||
style = currentStyle
|
||||
.copy(color = currentColor)
|
||||
.merge(
|
||||
fontSize = fontSize,
|
||||
fontStyle = fontStyle,
|
||||
fontWeight = fontWeight,
|
||||
|
@@ -161,6 +161,7 @@ data class AutoCompleteOptions(
|
||||
* @see TextField
|
||||
* @see PasswordTextField
|
||||
* @see BackspaceTextField
|
||||
* @see BasicTextField
|
||||
* @param value the text field value.
|
||||
* @param onValueChange the text field value change callback.
|
||||
* @param completionValues the auto complete values, when you want to use auto complete.
|
||||
@@ -224,7 +225,8 @@ fun TextField(
|
||||
})
|
||||
val textColor = style.textStyle.color.orNull() ?: colors.textColor
|
||||
BoxWithConstraints(
|
||||
modifier = Modifier.textField(
|
||||
modifier = Modifier
|
||||
.textField(
|
||||
enabled = enabled,
|
||||
colors = colors,
|
||||
style = style,
|
||||
@@ -232,7 +234,8 @@ fun TextField(
|
||||
borderWidth = animatedBorderWidth,
|
||||
interactionSource = interactionSource,
|
||||
then = modifier
|
||||
).pointerHoverState(TextFieldPointerState.Text)
|
||||
)
|
||||
.pointerHoverState(TextFieldPointerState.Text)
|
||||
) {
|
||||
// Note: If minWidth is not 0, a constant width is currently set.
|
||||
// At this time, the child layout must be completely filled into the parent layout.
|
||||
@@ -247,12 +250,17 @@ fun TextField(
|
||||
content = it
|
||||
)
|
||||
}
|
||||
Box(modifier = Modifier.weight(1f, needInflatable).textFieldPadding(style)) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.weight(1f, needInflatable)
|
||||
.textFieldPadding(style)
|
||||
) {
|
||||
TextFieldStyle(colors) {
|
||||
BasicTextField(
|
||||
value = value,
|
||||
onValueChange = onValueChange,
|
||||
modifier = Modifier.inflatable()
|
||||
modifier = Modifier
|
||||
.inflatable()
|
||||
.focusRequester(focusRequester)
|
||||
.onKeyEvent { keyEventFactory.onKeyEvent?.invoke(it) ?: false },
|
||||
enabled = enabled,
|
||||
@@ -307,6 +315,7 @@ fun TextField(
|
||||
* @see TextField
|
||||
* @see PasswordTextField
|
||||
* @see BackspaceTextField
|
||||
* @see BasicTextField
|
||||
* @param value the value of text.
|
||||
* @param onValueChange the text field value change callback.
|
||||
* @param completionValues the auto complete values, when you want to use auto complete.
|
||||
@@ -458,7 +467,9 @@ fun PasswordTextField(
|
||||
if (pressed) focusRequester.requestFocus()
|
||||
if (value.text.isEmpty() && animatedSize == 0.dp) passwordVisible = defaultPasswordVisible
|
||||
IconToggleButton(
|
||||
modifier = Modifier.size(animatedSize).pointerHoverState(TextFieldPointerState.Common),
|
||||
modifier = Modifier
|
||||
.size(animatedSize)
|
||||
.pointerHoverState(TextFieldPointerState.Common),
|
||||
style = IconButtonDefaults.style(padding = TextDecorIconPadding),
|
||||
checked = passwordVisible,
|
||||
onCheckedChange = {
|
||||
@@ -630,7 +641,9 @@ fun BackspaceTextField(
|
||||
}
|
||||
focusRequester.requestFocus()
|
||||
},
|
||||
modifier = Modifier.width(animatedSize).pointerHoverState(TextFieldPointerState.Common),
|
||||
modifier = Modifier
|
||||
.width(animatedSize)
|
||||
.pointerHoverState(TextFieldPointerState.Common),
|
||||
style = IconButtonDefaults.style(padding = TextDecorIconPadding),
|
||||
enabled = enabled,
|
||||
interactionSource = cInteractionSource
|
||||
|
@@ -230,7 +230,9 @@ fun FlexiDialog(
|
||||
) {
|
||||
neutralButton?.also { button ->
|
||||
AdaptiveRow(
|
||||
modifier = Modifier.fillMaxWidth().padding(bottom = style.buttonsSpacing),
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(bottom = style.buttonsSpacing),
|
||||
content = button
|
||||
)
|
||||
}
|
||||
@@ -327,9 +329,15 @@ private fun BasicFlexiDialog(
|
||||
alpha = animatedAlpha
|
||||
}.then(modifier)
|
||||
else modifier
|
||||
Box(modifier = Modifier.padding(insetsPadding).then(sModifier)) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.padding(insetsPadding)
|
||||
.then(sModifier)
|
||||
) {
|
||||
AreaBox(
|
||||
modifier = Modifier.widthIn(max = maxWidth).heightIn(max = maxHeight),
|
||||
modifier = Modifier
|
||||
.widthIn(max = maxWidth)
|
||||
.heightIn(max = maxHeight),
|
||||
colors = boxColors,
|
||||
style = boxStyle,
|
||||
contentAlignment = contentAlignment
|
||||
|
Reference in New Issue
Block a user