Skip to content

Commit

Permalink
Merge pull request #17 from Tencent/feature/pupup_radius
Browse files Browse the repository at this point in the history 
Feature/pupup radius
  • Loading branch information
@Luozf12345
Luozf12345 authored Dec 29, 2023
2 parents e1b8810 + f9581af commit df2a6ea
Show file tree
Hide file tree
Showing 3 changed files with 137 additions and 8 deletions.
3 changes: 3 additions & 0 deletions tdesign-component/example/assets/api/popup_api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
| closeColor | Color? | - | 关闭按钮颜色 |
| closeClick | PopupClick? | - | 关闭按钮点击回调 |
| backgroundColor | Color? | - | 背景颜色 |
| radius | double? | - | 圆角 |
| key | | - | |

```
Expand All @@ -51,6 +52,7 @@
| rightTextColor | Color? | - | 右边文本颜色 |
| rightClick | PopupClick? | - | 右边文本点击回调 |
| backgroundColor | Color? | - | 背景颜色 |
| radius | double? | - | 圆角 |
| key | | - | |

```
Expand All @@ -67,4 +69,5 @@
| closeColor | Color? | - | 关闭按钮颜色 |
| closeClick | PopupClick? | - | 关闭按钮点击回调 |
| backgroundColor | Color? | - | 背景颜色 |
| radius | double? | - | 圆角 |
| key | | - | |
118 changes: 116 additions & 2 deletions tdesign-component/example/lib/page/td_popup_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,8 +112,122 @@ class TDPopupPageState extends State<TDPopupPage> {
}));
},
);
}),
],
}),
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,
);
}));
},
)),
],
);
}),
],
);
}

Expand Down
24 changes: 18 additions & 6 deletions tdesign-component/lib/src/components/popup/td_popup_panel.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ class TDPopupBottomDisplayPanel extends StatelessWidget {
this.closeColor,
this.closeClick,
this.backgroundColor,
this.radius,
Key? key})
: super(key: key);

Expand Down Expand Up @@ -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],
Expand Down Expand Up @@ -107,6 +111,7 @@ class TDPopupBottomConfirmPanel extends StatelessWidget {
this.rightTextColor,
this.rightClick,
this.backgroundColor,
this.radius,
Key? key})
: super(key: key);

Expand Down Expand Up @@ -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],
Expand Down Expand Up @@ -212,6 +220,7 @@ class TDPopupCenterPanel extends StatelessWidget {
this.closeColor,
this.closeClick,
this.backgroundColor,
this.radius,
Key? key})
: super(key: key);

Expand All @@ -231,6 +240,9 @@ class TDPopupCenterPanel extends StatelessWidget {
/// 背景颜色
final Color? backgroundColor;

/// 圆角
final double? radius;

@override
Widget build(BuildContext context) {
if(closeUnderBottom){
Expand All @@ -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(
Expand All @@ -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,
Expand Down

0 comments on commit df2a6ea

Please sign in to comment.