膨胀瓦Flutter

dhxwm5r4  于 2023-01-09  发布在  Flutter
关注(0)|答案(2)|浏览(124)

我想当我点击其中一个扩展块时,其余的项目都关闭了,我该怎么做?
参考以下示例代码:

import 'package:flutter/material.dart';

class PickPlanPage extends StatefulWidget {
  const PickPlanPage({Key? key}) : super(key: key);

  @override
  State<PickPlanPage> createState() => _PickPlanPageState();
}

class _PickPlanPageState extends State<PickPlanPage> {

  bool initiallyExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ListView.separated(
        itemCount: 5,
        separatorBuilder: (context, index) => const SizedBox(height: 20),
        itemBuilder: (context, index) => ExpansionTile(
          initiallyExpanded: false,
          title: const Text('title'),
          onExpansionChanged: (value) => setState(() => initiallyExpanded = value),
          children: const [
            Text('Description'),
          ],
        ),
      ),
    );
  }
}
rsl1atfo

rsl1atfo1#

您只需稍加修改就可以在现有代码中存档。
确保你需要添加key到ListView & ExpansionTile窗口小部件.尝试下面的代码.

class _PickPlanPageState extends State<PickPlanPage> {
  int expandIndex = -1; // to handle only one expansion at a time. 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ListView.separated(
        key: Key(expandIndex.toString()), //<-- must add
        itemCount: 5,
        separatorBuilder: (context, index) => const SizedBox(height: 20),
        itemBuilder: (context, index) => ExpansionTile(
          key: Key(index.toString()), //<-- must add
          initiallyExpanded: (index == expandIndex), //<-- must add
          title: const Text('title'),
          onExpansionChanged: (value) {
            setState(() {
              expandIndex = value ? index : -1;
            });
          },
          children: const [
            Text('Description'),
          ],
        ),
      ),
    );
  }
}
42fyovps

42fyovps2#

您可以使用ExpansionPanelList并跟踪所选项目的点击事件。

class PickPlanPage extends StatefulWidget {
  const PickPlanPage({Key? key}) : super(key: key);

  @override
  State<PickPlanPage> createState() => _PickPlanPageState();
}

class _PickPlanPageState extends State<PickPlanPage> {
  int? openIndex;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          ExpansionPanelList(
            children: [
              for (int index = 0; index < 5; index++)
                ExpansionPanel(
                  headerBuilder: (context, isExpanded) => GestureDetector(
                    onTap: () {
                      openIndex = index;
                      setState(() {});
                    },
                    child: const Text('title'),
                  ),
                  isExpanded: index == openIndex,
                  body: Column(
                    children: [
                      Text('Description'),
                    ],
                  ),
                ),
            ],
          ),
        ],
      ),
    );
  }
}

相关问题