TDesign:Dialog 对话框

发布于:2025-02-10 ⋅ 阅读:(59) ⋅ 点赞:(0)

带输入框的对话框

onTap(() {
  showGeneralDialog(
	  context: context,
	  pageBuilder: (BuildContext buildContext, Animation<double> animation,
	      Animation<double> secondaryAnimation) {
	    return TDInputDialog(
	      textEditingController: controller.nicknameController,
	      title: '修改昵称',
	      titleColor: AppTheme.textColorfff,
	      contentColor: AppTheme.textColor333,
	      backgroundColor: AppTheme.navBarBgColor,
	      // 自定义对话框
	      customInputWidget: TDInput(
	          decoration: BoxDecoration(
	            border: Border.all(width: 1,color: AppTheme.primaryYellow),
	            borderRadius: BorderRadius.circular(20.w)
	          ),
	          textStyle: TextStyle(
	            fontSize: 28.sp,
	            color: Colors.white,
	          ),
	          hintText: '请输入昵称',
	          hintTextStyle: TextStyle(
	            fontSize: 28.sp,
	            color: const Color(0xff646B78),
	          ),
	          cursorColor: Colors.white,
	          backgroundColor: Colors.transparent,
	          showBottomDivider: false,
	          controller: controller.nicknameController,
	          inputType: TextInputType.text,
	          needClear: false,
	          onChanged: (value){
	            controller.onTapChangeValue();
	          }, 
	          onClearTap:(){
	            controller.nicknameController.text = '';
	            controller.onTapChangeValue();
	          },
	        ).marginAll(30.w),
	      // 自定义按钮
	      buttonWidget: <Widget>[
	        <Widget>[
	          TextWidget.body("取消",size: 28.sp,color: AppTheme.textColorfff,),
	        ]
	        .toRow(mainAxisAlignment: MainAxisAlignment.center)
	        .card(color: AppTheme.blockBgColor,shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40.w)))
	        .tight(width: 240.w,height: 80.w)
	        .onTap(() => Navigator.of(context).pop()),
	
	        <Widget>[
	          TextWidget.body("确定",size: 28.sp,color: AppTheme.textColor333,),
	        ]
	        .toRow(mainAxisAlignment: MainAxisAlignment.center)
	        .card(color: AppTheme.primaryYellow,shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40.w)))
	        .tight(width: 240.w,height: 80.w)
	        .onTap(() {
	          Navigator.of(context).pop();
	        }),
	      ].toRow(mainAxisAlignment: MainAxisAlignment.spaceBetween).paddingOnly(left: 30.w,right: 30.w,bottom: 30.w),
	    );
	  },
	);
}),


TextEditingController nicknameController = TextEditingController();
  onTapChangeValue(){
    update(["setup"]);
  }

第二种方案,使用showGeneralDialog,自定义contentWidget实现对话框

在这里插入图片描述

showGeneralDialog(
  context: context,
  pageBuilder: (BuildContext buildContext, Animation<double> animation,
    Animation<double> secondaryAnimation) {
      return TDAlertDialog(
        title: '修改昵称',
        contentWidget: TDInput(
            leftLabel: '', 
            leftLabelSpace:0, 
            hintText: '请输入用户昵称',
            textAlign: TextAlign.left,
            backgroundColor: AppTheme.pageBgColor,
            showBottomDivider: false,
            controller: controller.nameController,
            inputType: TextInputType.text,
            maxLines:1,
            contentPadding: EdgeInsets.only(left: 30.w,right: 30.w,top: 0,bottom: 0), // 默认内边距
          ).expanded().marginOnly(top: 20.w),
        titleColor: AppTheme.color333,
        contentColor: AppTheme.color666,
        backgroundColor: AppTheme.blockBgColor,
        leftBtn: TDDialogButtonOptions(
          title: '取消',
          titleColor: AppTheme.color999,
          style: TDButtonStyle(
            backgroundColor: AppTheme.pageBgColor,
          ),
          action: (){
            Navigator.of(context).pop();
          },
        ),
        rightBtn: TDDialogButtonOptions(
          title: '确定',
          style: TDButtonStyle(
            backgroundColor: AppTheme.error,
          ),
          action: (){
            Navigator.of(context).pop();
            controller.logout();
          },
        ),
        rightBtnAction: (){
          Navigator.of(context).pop();
          controller.logout();
        },
      );
  },
);

网站公告

今日签到

点亮在社区的每一天
去签到