diff --git a/tdesign-component/example/assets/api/popup_api.md b/tdesign-component/example/assets/api/popup_api.md index 6b76e6834..ae50239e3 100644 --- a/tdesign-component/example/assets/api/popup_api.md +++ b/tdesign-component/example/assets/api/popup_api.md @@ -30,6 +30,7 @@ | closeColor | Color? | - | 关闭按钮颜色 | | closeClick | PopupClick? | - | 关闭按钮点击回调 | | backgroundColor | Color? | - | 背景颜色 | +| radius | double? | - | 圆角 | | key | | - | | ``` @@ -51,6 +52,7 @@ | rightTextColor | Color? | - | 右边文本颜色 | | rightClick | PopupClick? | - | 右边文本点击回调 | | backgroundColor | Color? | - | 背景颜色 | +| radius | double? | - | 圆角 | | key | | - | | ``` @@ -67,4 +69,5 @@ | closeColor | Color? | - | 关闭按钮颜色 | | closeClick | PopupClick? | - | 关闭按钮点击回调 | | backgroundColor | Color? | - | 背景颜色 | +| radius | double? | - | 圆角 | | key | | - | | diff --git a/tdesign-component/example/lib/page/td_popup_page.dart b/tdesign-component/example/lib/page/td_popup_page.dart index 2f89a4a42..5d4cb98ba 100644 --- a/tdesign-component/example/lib/page/td_popup_page.dart +++ b/tdesign-component/example/lib/page/td_popup_page.dart @@ -112,8 +112,122 @@ class TDPopupPageState extends State { })); }, ); - }), - ], + }), + ExampleItem( + desc: '修改圆角', + builder: (_) { + return Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.spaceAround, + children: [ + Container( + margin: const EdgeInsets.all(8), + child: TDButton( + text: '底部弹出层-修改圆角', + theme: TDButtonTheme.primary, + type: TDButtonType.outline, + onTap: () { + Navigator.of(context).push(TDSlidePopupRoute( + slideTransitionFrom: SlideTransitionFrom.bottom, + builder: (context) { + return TDPopupBottomDisplayPanel( + title: '标题文字标题文字标题文字标题文字标题文字标题文字标题文字', + closeColor: TDTheme.of(context).errorNormalColor, + closeClick: () { + Navigator.pop(context); + }, + child: Container( + height: 200, + ), + radius: 6, + ); + })); + }, + ), + ), + Container( + margin: const EdgeInsets.all(8), + child: TDButton( + text: '底部弹出层-修改圆角', + theme: TDButtonTheme.primary, + type: TDButtonType.outline, + onTap: () { + Navigator.of(context).push(TDSlidePopupRoute( + slideTransitionFrom: SlideTransitionFrom.bottom, + builder: (context) { + return TDPopupBottomConfirmPanel( + title: '标题文字标题文字标题文字标题文字标题文字标题文字标题文字', + leftText: '点这里确认!', + leftTextColor: TDTheme.of(context).brandNormalColor, + leftClick: () { + TDToast.showText('确认', context: context); + Navigator.pop(context); + }, + rightText: '关闭', + rightTextColor: TDTheme.of(context).errorNormalColor, + rightClick: () { + Navigator.pop(context); + }, + child: Container( + height: 200, + ), + radius: 6, + ); + })); + }, + )), + Container( + margin: const EdgeInsets.all(8), + child: TDButton( + text: '居中弹出层-修改圆角', + theme: TDButtonTheme.primary, + type: TDButtonType.outline, + onTap: () { + Navigator.of(context).push(TDSlidePopupRoute( + slideTransitionFrom: SlideTransitionFrom.center, + builder: (context) { + return TDPopupCenterPanel( + closeColor: TDTheme.of(context).errorNormalColor, + closeClick: () { + Navigator.pop(context); + }, + child: const SizedBox( + height: 240, + width: 240, + ), + radius: 6, + ); + })); + }, + )), + Container( + margin: const EdgeInsets.all(8), + child: TDButton( + text: '居中弹出层-底部关闭-修改圆角', + theme: TDButtonTheme.primary, + type: TDButtonType.outline, + onTap: () { + Navigator.of(context).push(TDSlidePopupRoute( + slideTransitionFrom: SlideTransitionFrom.center, + builder: (context) { + return TDPopupCenterPanel( + closeUnderBottom: true, + closeClick: () { + Navigator.pop(context); + }, + child: const SizedBox( + height: 240, + width: 240, + ), + radius: 6, + ); + })); + }, + )), + ], + ); + }), + ], ); } diff --git a/tdesign-component/lib/src/components/popup/td_popup_panel.dart b/tdesign-component/lib/src/components/popup/td_popup_panel.dart index 739182a8f..a31f3ccc7 100644 --- a/tdesign-component/lib/src/components/popup/td_popup_panel.dart +++ b/tdesign-component/lib/src/components/popup/td_popup_panel.dart @@ -15,6 +15,7 @@ class TDPopupBottomDisplayPanel extends StatelessWidget { this.closeColor, this.closeClick, this.backgroundColor, + this.radius, Key? key}) : super(key: key); @@ -42,13 +43,16 @@ class TDPopupBottomDisplayPanel extends StatelessWidget { /// 背景颜色 final Color? backgroundColor; + /// 圆角 + final double? radius; + @override Widget build(BuildContext context) { return Container( decoration: BoxDecoration( color: backgroundColor ?? TDTheme.of(context).whiteColor1, - borderRadius: const BorderRadius.only( - topLeft: Radius.circular(12), topRight: Radius.circular(12))), + borderRadius: BorderRadius.only( + topLeft: Radius.circular(radius ?? 12), topRight: Radius.circular(radius ?? 12))), child: Column( mainAxisSize: MainAxisSize.min, children: [_buildTop(context), child], @@ -107,6 +111,7 @@ class TDPopupBottomConfirmPanel extends StatelessWidget { this.rightTextColor, this.rightClick, this.backgroundColor, + this.radius, Key? key}) : super(key: key); @@ -140,13 +145,16 @@ class TDPopupBottomConfirmPanel extends StatelessWidget { /// 背景颜色 final Color? backgroundColor; + /// 圆角 + final double? radius; + @override Widget build(BuildContext context) { return Container( decoration: BoxDecoration( color: backgroundColor ?? TDTheme.of(context).whiteColor1, - borderRadius: const BorderRadius.only( - topLeft: Radius.circular(12), topRight: Radius.circular(12))), + borderRadius: BorderRadius.only( + topLeft: Radius.circular(radius ?? 12), topRight: Radius.circular(radius ?? 12))), child: Column( mainAxisSize: MainAxisSize.min, children: [_buildTop(context), child], @@ -212,6 +220,7 @@ class TDPopupCenterPanel extends StatelessWidget { this.closeColor, this.closeClick, this.backgroundColor, + this.radius, Key? key}) : super(key: key); @@ -231,6 +240,9 @@ class TDPopupCenterPanel extends StatelessWidget { /// 背景颜色 final Color? backgroundColor; + /// 圆角 + final double? radius; + @override Widget build(BuildContext context) { if(closeUnderBottom){ @@ -244,7 +256,7 @@ class TDPopupCenterPanel extends StatelessWidget { margin: const EdgeInsets.only(top: 24, bottom: 24), decoration: BoxDecoration( color: backgroundColor ?? TDTheme.of(context).whiteColor1, - borderRadius: const BorderRadius.all(Radius.circular(12))), + borderRadius: BorderRadius.all(Radius.circular(radius ?? 12))), child: child, ), GestureDetector( @@ -263,7 +275,7 @@ class TDPopupCenterPanel extends StatelessWidget { return Container( decoration: BoxDecoration( color: backgroundColor ?? TDTheme.of(context).whiteColor1, - borderRadius: const BorderRadius.all(Radius.circular(12))), + borderRadius: BorderRadius.all(Radius.circular(radius ?? 12))), child: Stack( children: [ child,