当前位置：首页 > news >正文

flutter下拉列表

news 2025/8/21 23:33:59

下拉列表

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

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);@overrideState<PulldownItem> createState() => _PulldownItemState();
}class _PulldownItemState extends State<PulldownItem>with SingleTickerProviderStateMixin {late AnimationController _animationController;late Animation<double> _animation;var _crossFadeState = CrossFadeState.showSecond;@overridevoid initState() {super.initState();_animationController = AnimationController(duration: const Duration(milliseconds: 300), vsync: this);_animation = Tween(begin: .5, end: 0.0).animate(_animationController);}@overridevoid dispose() {_animationController.dispose();super.dispose();}@overrideWidget 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,),),],),);}
}