Flutter：如何创建平滑的下拉菜单？

Question

我不熟悉，试图创建一个下拉列表，单击该元素时，该元素会平滑切换以显示该元素的内部列表。

请参考所附的图像以更好地理解。

以下是我的注视代码。

import 'package:flutter/material.dart';
import 'package:lpa_exam/src/api/api_manager.dart';

class Practicetest extends StatefulWidget {
  final examId;
  Practicetest({Key key, this.examId});
  @override
  _PracticetestComp createState() => _PracticetestComp();
}

class _PracticetestComp extends State<Practicetest> {
  List listofpracticetest;
  void initState() {
    super.initState();
    APIManager.getpracticetestlist(widget.examId).then((resultpracticelist) {
      setpracticetest(resultpracticelist);
    });
  }

  void setpracticetest(value) {
    setState(() {
      listofpracticetest = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color(0xffF8FDF7),
        appBar: AppBar(
          backgroundColor: Color(0xffF8FDF7), // status bar color
          brightness: Brightness.light,
          elevation: 0.0,
          leading: Container(
            margin: EdgeInsets.only(left: 17),
            child: RawMaterialButton(
              onPressed: () {
                Navigator.pushNamed(context, '/');
              },
              child: new Icon(
                Icons.keyboard_backspace,
                color: Colors.red[900],
                size: 25.0,
              ),
              shape: new CircleBorder(),
              elevation: 4.0,
              fillColor: Colors.white,
              padding: const EdgeInsets.all(5.0),
            ),
          ),
        ),
        body: Container(
          // height: 200,
          margin: EdgeInsets.only(top: 40, left: 30, right: 30),
          child: ListView(
            shrinkWrap: true,
            scrollDirection: Axis.vertical,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  ListTile(
                      dense: true,
                      contentPadding: EdgeInsets.all(0),
                      title: Text(
                        'Quick set of',
                        style: TextStyle(
                          fontWeight: FontWeight.w500,
                          fontSize: 18,
                        ),
                      ),
                      subtitle: Text(
                        'Practice Tests',
                        style: TextStyle(
                            fontWeight: FontWeight.w700,
                            fontSize: 22,
                            color: Colors.black),
                      )),
                  Container(
                      decoration: BoxDecoration(
                          border: Border(
                        bottom: BorderSide(
                          color: Colors.grey[300],
                          width: 1.0,
                        ),
                      )),
                      margin: EdgeInsets.only(top: 30),
                      child: Container(
                        child: ListTile(
                          contentPadding: EdgeInsets.all(0),
                          leading: Text(
                            'Alegbra',
                            style: TextStyle(
                                color: Colors.black,
                                fontWeight: FontWeight.w500),
                          ),
                          trailing: Text('1 Submitted ',
                              style: TextStyle(color: Colors.grey)),
                        ),
                      )),
                ],
              )
            ],
          ),
        ));
  }
}

P.S

因此，我将从api获得列表，目前正在尝试对模拟进行硬编码。任何参考或代码肯定会对我有所帮助。

谢谢

Answer 1

将您的孩子放在AnimatedContainer下，它将为您完成剩下的工作，并查看官方文档以获取更多信息

Answer 2

找到了满足模拟需求的完美解决方案。

ExpansionPanelList小部件：

https://api.flutter.dev/flutter/material/ExpansionPanelList-class.html

这样渲染：