Compose: you hit my cousin

This is the 16th day of my participation in the Modifier Challenge. The Modifier Modifier will be explained in detail in this article

Please put forward valuable comments, or suggestions

Git address:

Github.com/ymeddmn/Mod…

Modifier

Modifier can be translated as Modifier and can be used to modify the following:

• Changes the size, layout, behavior, and appearance of composable items

• Add information, such as accessibility labels

• Processing user input

• Add advanced interactions such as making elements clickable, scrollable, draggable, or zoomable

Item code example

The attribute extension cases in Section 3 are based on the parameter assignment of the item method in this section

There are some attributes I think are not important for beginners, and did not in-depth research, forgive me

item1

1. Item1 code

@Composable fun item1(m: Modifier) { Column( modifier = Modifier.fillMaxSize(1f), horizontalAlignment = Alignment.CenterHorizontally ) { Box( modifier = m .size(100.dp) .background(color = Color.Red), ContentAlignment = align.center) {Text(Text = "align.center ", textAlign = textalign.center, style = TextStyle(color = Color.White) ) } Spacer(modifier = Modifier.height(10.dp)) } }Copy the code

2. The default display of item is as follows:

All extension methods of the Modifier in detail

Selectable (Compose implementation optional)

Here at first I was no clue, spelled life baidu to find information, but to tell the truth an article about here are not. So can only go to the official website to translate official documents. It took me almost half an hour to figure it out. Eyes are useless again, this week’s plan of Livedata source also can not speak

In general, selectable is used for radio selection, and can be used as a RadioGroup or as a TabView.

1. code

Val ICONS = listOf<Triple<Int, Int, String>>(Triple(r.rawable. Apple, r.rawable. Lufeicry), Nameicry, "nameismile "), Triple(r.rawable. Luobinsmile, R.Rawable. Var selectedItem = remember {mutableStateOf(ICONS [0])} Column(modifier = modifier. FillMaxSize (1f), verticalArrangement = Arrangement.Center, HorizontalAlignment = Alignment. CenterHorizontally) {Row {Text (Text = "public no. : \" Safe and sound \", ", style = TextStyle(color = color.black, fontSize = 15.sp), Modifier = modifier. Weight (0.7 f)) Text (Text = selectedItem. Value. Third, style = TextStyle [color = color. Red, FontSize = 25.sp), mysql = modificer.weight (0.3f))} Row(// mysql = modificer.selecTableGroup (), horizontalArrangement = Arrangement.SpaceAround ) { icons.forEach { val selected = selectedItem.value == it Image( painter = painterResource(id = if (selected) it.first else it.second), contentDescription = null, modifier = Modifier .selectable( selected = selected, enabled = true, role = null, onClick = { selectedItem.value = it }) .size(100.dp) ) } } }Copy the code

2. The effect

fillMaxSize

1. code

Item1 (m = Modifier. Background (color = color.blue).fillMaxSize(75f))Copy the code

2. The effect

The property is filled 0.75 times the size of the parent container

height

1. code

 item1(m = Modifier.background(color = Color.Blue).height(30.dp))
Copy the code

2. The effect

After setting the height to 30, the width changes as well

width

With the height

size

1. code

   item1(m = Modifier.background(color = Color.Blue).size(30.dp))

2. rendering

It’s 30dp wide and 30dp high

background

Simply use background to set the background color

item1(m = Modifier.background(color = Color.Red))

Achieve a circular background

1. code

item1(m = Modifier.background(color = Color.Red,shape = CircleShape))
Copy the code

2. The effect

Implement rounded background

1. code

item1(m = Modifier.background(color = Color.Red,shape = RoundedCornerShape(10.dp)))
Copy the code

Effect of 2.

Achieve a gradient effect

1. code

 item1(m = Modifier.background(brush = Brush.linearGradient(mutableListOf(Color.Red,Color.Green,Color.Yellow,Color.Gray))))

Copy the code

2. The effect

The default linear gradient is from top left to bottom right

verticalScroll

Add it to Column and you can scroll vertically

1. code

 Column(
        modifier = Modifier
            .verticalScroll(rememberScrollState())
            .fillMaxSize(1f)
    )
Copy the code

The padding and border

1. code

 item1(
            m = Modifier
                .background(color = Color.Red,shape = CircleShape)
                .padding(4.dp)
                .border(border = BorderStroke(2.dp, color = Color.Green),shape = CircleShape)
        )
Copy the code

2. The effect

   This example adds a circular background, then a padding, and finally a circular border

clip

Note That the background method and the clip method cannot be used at the same time. Otherwise, the background method overrides the clip effect

1. code

 Box(modifier = Modifier.clip(CircleShape)) {
            Box(Modifier.size(200.dp).background(color = Color.Green))
        }
Copy the code

2. The effect

clipToBounds

no

offset

As described in the documentation, offset can offset the contents of elements within a control, such as:

If the inner element is LTR, x is positive to the right and negative to the left

If the inner element is RTL, x is positive to the left and negative to the right

1. code

 item1(m = Modifier.background(color = Color.Red).offset(x=30.dp))
Copy the code

2. The effect

absoluteOffset

This is similar to offset, except that the layout direction is not considered.

Positive values go right or down, negative values go left or up

absolutePadding

no

alpha

Set transparency

1. code

Item1 (M = Modifier. Background (color = color.red).Alpha (0.3F))Copy the code

2. The effect

clickable

Makes any control clickable and adds a water ripple effect

1. code

   Item1 (m = Modifier. Background (color = color.red).Clickable (onClick = {log.e (” Tag “,” Anandieu “)}))

2. The effect

   Print log

E/ TAG: Ananzhuo E/ Tag: Ananzhuo E/ Tag: Ananzhuo E/ Tag: AnanzhuoCopy the code

defaultMinSize

You can set the minimum size of the control

1. code

item1(m = Modifier.background(color = Color.Red).defaultMinSize(300.dp))
Copy the code

2. The effect

The width of the control in Item1 is 100dp, we set the minimum control size to 300DP, and then the control width automatically changed to 300DP, indicating that the minimum size is in effect.

draggable

no

drawBehind

no

drawWithCache

no

drawWithContent

no

heightIn

Setting the minimum height

horizontalScroll

To make our space slide horizontally, we used Text as a demo in our code, and Text became a single line slide

1. code

Text(Text = "public id", "public id", "public id", AD methods and 扥 a law as a building send 扥 扥, modifier = modifier. "horizontalScroll (enabled = true, state = ScrollState(12)) .height(100.dp) .background(color = Color.Green), textAlign = TextAlign.Center )Copy the code

2. The effect

indication

no

layout

no

layoutId

Sets the ID for the control

ConstraintLayout is useful when using ConstraintLayout

1. code

item1(m = Modifier.background(color = Color.Red).layoutId("name"))
Copy the code

nestedScroll

no

onFocusChanged

no

onFocusEvent

no

onGlobalPositioned

no

onKeyEvent

no

onPreviewKeyEvent

no

onSizeChanged

no

paddingFrom

no

PaddingFromBaseLine

no

paint

no

pointInput

no

requireHeight

1. code

2. The effect

requireHeightIn

Reset the minimum height,

1. code

item1(m = Modifier.background(color = Color.Red).requiredHeight(height = 20.dp))
Copy the code

2. The effect

The heights in the blue box are the effect of calling the Requiretin method

Outside the box is the normal control height

requireSize

With: requireHeightIn

requireWidth

With: requireHeightIn

requireWidthIn

With: requireHeightIn

scale

Scale the contents of the control

1. code

item1(m = Modifier.background(color = Color.Red).scale(2f))
Copy the code

2. The effect

shadow

shadows

1. code

item1( m = Modifier .background(color = Color.Red) .shadow(elevation = 3.dp, RectangleShape = RectangleShape,clip = true)Copy the code

2. The effect

It feels so ugly. I must have used it wrong

sizeIn

The minimum size

swipeable

no

toggleable

It is very suitable for switching effect. In this case, we use the two pictures we found to simulate the switching state of clicking

1. code

 val selected = remember {
        mutableStateOf(true)
    }
    Image(
        painter = painterResource(id = if (selected.value) R.drawable.apple else R.drawable.luobinsmile),
        contentDescription = null,
        modifier = Modifier
            .toggleable(
                value = selected.value,
                enabled = true,
                role = null,
                onValueChange = {
                    selected.value = it
                })
            .size(100.dp)
    )
Copy the code

2. The effect

transformable

no

withIn

Minimum size and maximum size can be set

1. code

item1(m = Modifier.background(color = Color.Red).widthIn(min = 50.dp,max = 200.dp))

wrapContentHeight

no

wrapContentWidth

no

wrapContentSize

no

zIndex

ZIndex is used to set the level of the control. The control with a larger zIndex value is overwritten by the control with a smaller zIndex value. If two controls zIndex are the same size, they are placed in the order in their code

1. code

   In this example code, we create two Text,

The first red zIndex is equal to 5

The second green zIndex is equal to 4

We expect the red one to be on top of the green one

Box {Text(Text = "0 ", Mysql = modification.size (100.dp).background(color = color.red).zindex (5f)) Text(Text = "ananzhuo 1", modifier = Modifier .size(150.dp) .background(color = Color.Green) .zIndex(4f) ) }Copy the code

2. The effect

The end result is in line with our expectations

Follow my public account “ananzhuo” to learn more knowledge