introduce

Modifier is an ordered, unchanging collection of decorative or adding actions, such as background, padding, width, height, focus click events, etc. Or give Text a single line, Button a variety of click states, etc. In fact, all control general properties are in the Modifier.

Basic Attributes

The Modifier in the attribute is very many, after learning the Modifier, Compose went to school half, the official document check [Compose Modifier related document]

  • Modifier.height(height: Dp)

Set its own height, in dp, and the value can be overridden

  • Modifier.height(intrinsicSize: IntrinsicSize)

Similar to the layout_height = "wrap_content"

  • Modifier.heightIn(min: Dp, max: Dp)

Min is equivalent to minHeight, Max is equivalent to maxHeight, and without Max it is equivalent to layout_height="match_parent"

  • Modifier.width(width: Dp)

Set its own width, in dp, to be overridden

  • Modifier.width(intrinsicSize: IntrinsicSize)

Similar to the layout_width = "wrap_content"

  • Modifier.widthIn(min: Dp, max: Dp)

Min is equivalent to minWidth, Max is equivalent to maxWidth, and without Max, layout_Width="match_parent"

  • Modifier.fillMaxHeight(fraction: Float)

Layout_height = “match_parent” fraction percentage

  • Modifier.fillMaxWidth(fraction: Float)

Layout_width = “match_parent” fraction percentage

  • Modifier.fillMaxSize(fraction: Float)

FillMaxHeight + fillMaxWidthfraction percentage

  • Modifier.size(size: Dp)

Set width=height=size

  • Modifier.size(width: Dp, height: Dp)

Set the width of high

  • Modifier.sizeIn(minWidth: Dp, minHeight: Dp, maxWidth: Dp, maxHeight: Dp)

By the combined use of Modifier. HeightIn Modifier. WidthIn

  • Modifier.defaultMinSize(minWidth: Dp, minHeight: Dp)

SizeIn (minWidth: Dp, minHeight: Dp)

  • Modifier.shadow(elevation: Dp, shape: Shape, clip: Boolean)

Set shadow, shadow size, shape, clip = elevation>0

  • Modifier.wrapContentHeight(align: Alignment.Vertical,unbounded: Boolean)

The height is self-adaptive. Align is set to its mode (default vertical center), and whether the unbounded setting can be “unbounded”. True can surpass the parent layout height

  • Modifier.wrapContentWidth(align: Alignment.Horizontal,unbounded: Boolean)

The width is adaptive, align is set to its way (default horizontal center), whether the unbounded setting can be "unbounded", and true can exceed the parent layout width

  • Modifier.wrapContentSize(align: Alignment, unbounded: Boolean)

Setting width and height adaptive, align setting to its way (default center), whether unbounded setting can be "unbounded", true can exceed the parent layout size

  • Modifier.paddingFrom(alignmentLine: AlignmentLine, before: Dp, after: Dp)

AlignmentLine is FirstBaseline, LastBaseline, before is the distance between the position of the first/last line of text Baseline and parent top/start, After indicates the distance between the Baseline of the first line and the Baseline of the last line and the parent bottom/end

  • Modifier.paddingFrom(alignmentLine: AlignmentLine,before: TextUnit,after: TextUnit)

Likewise, before, after can be set to TextUnit, for example sp

  • Modifier.paddingFromBaseline(top: Dp, bottom: Dp)

Top equals FirstBaseline, buttom equals LastBaseline

  • Modifier.paddingFromBaseline(top: TextUnit, bottom: TextUnit)

Same as top, btTom can set TextUnit, for example sp

  • Modifier.alpha(alpha: Float)

Set transparency Alpha

  • Modifier.clip(shape: Shape)

Set the Angle cutting Shape

  • Modifier.clipToBounds()

Crop content according to the specified boundary, similar to Android child View content does not exceed the parent View

  • Modifier.background(color: Color, shape: Shape)

Set the background Color to Color and the corner cut to Shape

  • Modifier.background(brush: Brush, shape: Shape, alpha: Float)

Set the Fill color (Gradient) to Brush, Cut Angle Shape, and Transparency Alpha

  • Modifier.border(width: Dp, color: Color, shape: Shape)

Set border width, color, and border shape

  • Modifier.border(width: Dp, brush: Brush, shape: Shape)

Set border width, border fill color (gradient) brush, border shape shape

  • Modifier.border(border: BorderStroke, shape: Shape)

BorderStroke(Val Width: Dp, Val Brush: Brush) ditto

  • Modifier.clickable(interactionSource:MutableInteractionSource, indication: Indication? , enabled: Boolean,onClickLabel: String? ,role: Role? , onClick: () -> Unit)

Set the click event onClick, interactionSource (customizable), Enabled whether to click, role user interface element type with interactionSource to achieve custom interaction event processing, onClickLabel barrier-free description

  • Modifier.combinedClickable(interactionSource: MutableInteractionSource, indication: Indication?,enabled: Boolean,onClickLabel: String?,role: Role?, onLongClickLabel: String?, onLongClick: () -> Unit, onDoubleClick: () -> Unit, onClick: () -> Unit

)

Set the combination click event to include combinedClickable(onLongClick = {/*....) */ }, onDoubleClick ={ /*.... */ }, onClick = { /*.... * /}),

  • Modifier.layoutId(layoutId: Any)

Measure: MeasureScope: MeasureScope: MeasureScope

  • Modifier.layout( measure: MeasureScope.(Measurable, Constraints) -> MeasureResult

)

The layoutId match is Measurable. LayoutId is customized

  • Modifier.offset(x: Dp, y: Dp)

‘is equivalent to “Android :layout_margin”. When LayoutDirection is LTR, the positive X offset will move content to the right, and when LayoutDirection is RTL, the positive X offset will move content to the left

  • Modifier.offset(offset: Density.() -> IntOffset)

Used to dynamically change offset when the LayoutDirection is LTR, the positive x offset moves content to the right, and when the LayoutDirection is RTL, the positive x offset moves content to the left

  • Modifier.absoluteOffset(x: Dp, y: Dp)

AbsoluteOffset, regardless of LayoutDirection LayoutDirection: positive X offset will always move content to the right

Ltr effect is the same as offset

  • Modifier.absoluteOffset(offset: Density.() -> IntOffset)

Use the same -modifier. Offset (offset: Density.() -> IntOffset), do not consider the LayoutDirection LayoutDirection: positive X offset will always move content to the right

  • Modifier.padding(start: Dp, top: Dp, end: Dp, bottom: Dp)

Equivalent to "Android :padding", the offset parent control is clipped

  • Modifier.padding(all: Dp)

Equivalent to "Android :padding", the offset parent control will be clipped all = start = end = top = bottom

  • Modifier.padding(horizontal: Dp, vertical: Dp)

Horizontal = start = end,vertical = top = bottom, horizontal = start = end,vertical = top = bottom

  • Modifier.padding(paddingValues: PaddingValues)

PaddingValues(horizontal, vertical)   PaddingValues(start,top,end,bottom)

  • Modifier.absolutePadding(left: Dp, top: Dp, right: Dp, bottom: Dp)

The difference from Padding is that absolutePadding does not take into account LayoutDirection LayoutDirection: a positive X offset will always move content to the right

In layoutdirection. Rtl, the values of left and right are interchanged

conclusion

Currently, Compose can perfectly replace the original XML, with better performance and finer functions, but it takes time to adapt. The above is the introduction of the basic attributes of the Modifier. There are many attributes of the Modifier. Students interested in further understanding of the Modifier can continue to pay attention to the advanced properties later updated.