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)),
                        ),
                      )),
                ],
              )
            ],
          ),
        ));
  }
}

聚苯乙烯

所以，我將從 api 獲得的列表，目前正在嘗試硬編碼模擬。 任何參考或代碼肯定會幫助我。

謝謝

Answer 1

將您的孩子包裹在 AnimatedContainer 下它會為您完成剩下的工作並查看官方文檔以獲取更多信息

Answer 2

找到了模擬需求的完美解決方案。

擴展面板列表小部件：

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

像這樣渲染：