Nastavit jeden AnimatedVisibility na true v LazyColumn

0

Otázka

Mám Composable funkce pro operační systém infos, která rozšiřuje detaily na klepněte na tlačítko a vrátí při opětovném kliknutí.

@ExperimentalAnimationApi
@Composable
fun OSCard(os: OS) {
    var expanded by remember {
        mutableStateOf(false)
    }
    Column(modifier = Modifier
        .clickable { expanded = !expanded }
        .fillMaxWidth()) {
        Text(
            modifier = Modifier
                .padding(20.dp),
            text = os.name,
            style = MaterialTheme.typography.h6
        )
        AnimatedVisibility(visible = expanded) {
            Text(text = os.description, modifier = Modifier.padding(20.dp))
        }
        Divider(Modifier.height(2.dp))
    }
}

Vytvořil jsem seznam a prošel přes LazyColumn

var OSs = listOf<OS>(
    OS(
        "Android",
        "Android is a mobile/desktop operating system..."
      ),
    OS(
        "Microsoft Windows",
        "Microsoft Windows, commonly referred to as Windows..."
      ),
    OS(
        "Linux",
        "Linux is a family of open-source Unix-like operating systems..."
      )
)

Surface(color = MaterialTheme.colors.background) {
    LazyColumn(modifier = Modifier.fillMaxSize()) {
        items(items =  OSs){
            os -> OSCard(os)
        }
    }
}

Když to funguje, jak se očekávalo, chci, aby to bylo takové, že pokud kartu je otevřen a další karta je vybrána, dříve otevřené karty bude uzavřen.

To je to, co jsem se chtěl vyhnout, může mi někdo dát tip na to, jak na to?

What I am trying to avoid

1

Nejlepší odpověď

1

Tady je jedno řešení. Přidat parametr OS objektu tzv. isExpanded. To jen dostane nastavena na hodnotu true, když kliknete na kartu. Click handler bude jasné, vlajka ve všech ostatních karet.

Také jsem přidal id parametr, který usnadňuje najít položky byly klikli. Na name parametr by byly použity.

Státní variabilní expandCard třeba číst pro to, aby vyvolat kompozici, tak var e = expandCard slouží ke čtení hodnoty. Všimněte si také, že vytvoření seznamu MUSÍ být mimo composable, jinak to bude jen nakonec dostat znovu vytvořen a isExpanded pole by být nastavena na hodnotu false na všechny položky.

A konečně, nejsem si jistý, proč používáte LazyColumn za to. LazyColumn je opravdu určen pro velké soubory dat a především pro stránkování. Můžete jen použít normální Sloupec s vertikální rolování, pokud máte přiměřený počet položek.

class MainActivity : ComponentActivity() {
    @ExperimentalAnimationApi
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        var OSs = listOf(
            OS(
                id = "android",
                name = "Android",
                description =  "Android is a mobile/desktop operating system..."
            ),
            OS(
                id = "mswindows",
                name = "Microsoft Windows",
                description = "Microsoft Windows, commonly referred to as Windows..."
            ),
            OS(
                id = "linux",
                name ="Linux",
                description = "Linux is a family of open-source Unix-like operating systems..."
            )
        )

        setContent {

            var expandCard by remember { mutableStateOf(false) }
            var e = expandCard

            Surface() {
                LazyColumn(  modifier = Modifier.fillMaxSize()) {
                    itemsIndexed(
                        items = OSs,
                        key = { index, os ->
                            os.name
                        }
                    ) { index, os ->
                        OSCard(os) {osClicked ->
                            val isExpanded = osClicked.isExpanded
                            OSs.forEach { it.isExpanded = false }
                            OSs.first { it.id == osClicked.id }.isExpanded = isExpanded
                            expandCard = !expandCard
                        }
                    }
                }
            }
        }
    }
}

@ExperimentalAnimationApi
@Composable
fun OSCard(
    os: OS,
    onClick: (os: OS) -> Unit
) {

    Column(modifier = Modifier
        .clickable {
            os.isExpanded = !os.isExpanded
            onClick(os)
        }
        .fillMaxWidth()) {
        Text(
            modifier = Modifier
                .padding(20.dp),
            text = os.name,
            style = MaterialTheme.typography.h6
        )

        AnimatedVisibility(visible = os.isExpanded) {
            Text(text = os.description, modifier = Modifier.padding(20.dp))
        }
        Divider(Modifier.height(2.dp))
    }
}

class OS(var id: String, var name: String, var description: String, var isExpanded: Boolean= false)
2021-11-23 13:48:37

Jsem tak ráda, že pro odpověď, stejně jako vysvětlení, co dělat a co ne. Oceňuji znalosti sdílené. Děkuji.
Kinyo356

V jiných jazycích

Tato stránka je v jiných jazycích

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................