Unity Toggle component stepping pit usage notes

The project needs to use the sorting function, two kinds of sorting, one is the model, the other is the rating, when the user clicks on the model or rating, the items in the item list need to be reordered, a bit similar to the backpack in the game, I hope the weapons are sorted by quality or enhancement Sort by rank. The easiest way is to make two Buttons, which belong to the same View, get the reference of each other through the mediator mode, and modify the state of itself and the other party when they are clicked. But this is more troublesome, and it may be necessary to add some attributes to control some states, such as whether it is currently selected, etc., which is a little troublesome, so we can use the Toggle component in UGUI.
First look at the basic properties of Toggle
insert image description here

There are a few attributes on the map that I haven't marked, because I don't need them for the time being, and I may forget them after checking them for a long time.
From the figure, we need to pay attention to three points (the rest can be used by default)
Is On represents whether the current option is selected.
One is the Target Graphic under Transition, which represents the background of the current option box.
The Graphic below represents the picture displayed when selected.
insert image description here
Group is a button group, and multiple Toggles can be bound to the same Group to achieve the effect of a radio button.
insert image description here

Drag the Group into the Group property in the Toggle component respectively.
insert image description here
The effect demonstration is shown in the figure.
In actual projects, such a crude method as the hook is generally not used, and the picture is usually grayed out.
insert image description here
As shown in FIG.
Just change the color of BacgGround (the realistic picture when it is not selected, it will always be displayed, but it will be masked by CheckMark, if the transparency of CheckMark is 0, it will still be displayed when it is selected) to gray, CheckMark (the one you want to display after clicking picture) to white.
The effect is as shown in the picture: I chose a more obvious black color for the selected effect. insert image description here
Small record: I entered the wrong circle at first. I always thought that Disable Color was an unselected color. In fact, this is a color that cannot be interacted with. My mind is dizzy. Lost.
demo file

Guess you like

Origin blog.csdn.net/qq_40629631/article/details/121478445