Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/pupup radius #17

Merged
merged 2 commits into from
Dec 29, 2023
Merged

Feature/pupup radius #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
25783f8
pupup增加圆角配置
Luozf12345 Dec 29, 2023
f9581af
更新pupupApi
Luozf12345 Dec 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions tdesign-component/example/assets/api/popup_api.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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