flutter下拉列表

下拉列表

内容和下拉列表的标题均可滑动

Expanded： 内容限制组件，将其子类中的无限扩展的界面限制在一定范围中。在此使用，是为了防止下拉列表中的内容超过了屏幕限制。

SingleChildScrollView： 这个组件，从名字中可以看出来，不必多说，是可以控制的滑动组件，并且是其系统自带的

ExpansionTile： 这个就是系统自带的下拉列表组件，title中展示下拉列表的标题，children[ ] 中展示下拉列表的内容。

 Expanded(
        child: SingleChildScrollView(	//滑动组件
            child: ExpansionTile(	
      title: Text(		//下拉列表的标题
        "详细信息",
        style: TextStyle(
            fontWeight: FontWeight.bold, fontSize: ScreenUtil().setSp(32)),
      ),
      children: [  //下拉列表中的内容
        Container(
            padding: EdgeInsets.only(left: 30, right: 20, bottom: 10),
            child: _patientinfo()),
        Container(
          padding: EdgeInsets.only(left: 30, right: 20, bottom: 10),
          child: _vitalsign(),
        ),
        Container(
          padding: EdgeInsets.only(left: 30, right: 20, bottom: 20),
          child: _inspect(),
        ),
        Container(
          padding: EdgeInsets.only(left: 30, right: 20, bottom: 20),
          child: _firstaid(),
        ),
        Container(
          padding: EdgeInsets.only(left: 30, right: 20, bottom: 20),
          child: _handovertime(),
        ),
        Container(
          padding: EdgeInsets.only(left: 30, right: 20, bottom: 20),
          child: _remarks(),
        ),
      ],
    )))

使用这个三个组件进行嵌套的话，是可以实现下拉列表滑动，但是，其标题也可以滑动了，不满足策划需求。所以又做出了第二种方式。如下所示

内容均可滑动，标题不滑动

为了使下拉列表的标题不动，内容可以进行滑动，系统自带的下拉列表不能满足条件，通过不同的组件组合，实现这个功能。
在此使用了InkWell组件。并且加载了动画，在点击时，动画展开面板，如下图所示。

class PulldownItem extends StatefulWidget {
  PulldownItem({Key? key}) : super(key: key);
  @override
  State<PulldownItem> createState() => _PulldownItemState();
}

class _PulldownItemState extends State<PulldownItem>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _animation;
  var _crossFadeState = CrossFadeState.showSecond;
  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
        duration: const Duration(milliseconds: 300), vsync: this);
    _animation = Tween(begin: .5, end: 0.0).animate(_animationController);
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      margin: EdgeInsets.only(bottom: 30.w),
      child: Column(
        children: [
          InkWell(
            highlightColor: Colors.transparent,
            splashColor: Colors.transparent,
            onTap: () {
              if (_animationController.status == AnimationStatus.completed) {
                _animationController.reverse();
                _crossFadeState = CrossFadeState.showSecond;
              } else {
                _animationController.forward();
                _crossFadeState = CrossFadeState.showFirst;
              }
              setState(() {});
            },
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 32.w, vertical: 30.w),
              child: Row(
                children: [
                  Text(
                    "widget.title",  //下拉列表的标题
                    style: TextStyle(
                        fontSize: 32.sp,
                        color: Colors.black,
                        fontWeight: FontWeight.bold,
                        height: 1),
                  ),
                  const Spacer(),
                  RotationTransition(			//下拉列表右边的小三角形
                    alignment: Alignment.center,
                    turns: _animation,
                    child: Image.asset(
                      'assets/login/select_img_ambulance.png',
                      width: 46.w,
                      fit: BoxFit.contain,
                    ),
                  ),
                ],
              ),
            ),
          ),
          Expanded(
            child: AnimatedCrossFade(
              duration: const Duration(milliseconds: 300),
              firstChild: Container(
                width: double.infinity,
                padding: EdgeInsets.symmetric(horizontal: 32.w),
                child: SingleChildScrollView(
                  child: Column(
                    children: [		//下拉列表的内容，在此是可以滑动的
                      Text("下拉列表的内容"),
                    ],
                  ),
                ),
              ),
              secondChild: const SizedBox(
                width: double.infinity,
              ),
              crossFadeState: _crossFadeState,
            ),
          ),
        ],
      ),
    );
  }
}