Skip to content

Commit cbc37cf

Browse files
jflin19990707jackjflin
jflin19990707
and
jackjflin
authored
add:TDButton添加渐变颜色背景 (Tencent#773)
Co-authored-by: jackjflin <[email protected]>
1 parent d6bdb0c commit cbc37cf

File tree

3 files changed

+81
-41
lines changed

3 files changed

+81
-41
lines changed

‎tdesign-component/example/lib/page/td_button_page.dart‎

Lines changed: 70 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -90,10 +90,7 @@ class _TDButtonPageState extends State<TDButtonPage> {
9090
),
9191
);
9292
}),
93-
ExampleItem(
94-
ignoreCode: true,
95-
desc: '组合按钮',
96-
builder: (_) => CodeWrapper(builder: _buildCombinationButtons)),
93+
ExampleItem(ignoreCode: true, desc: '组合按钮', builder: (_) => CodeWrapper(builder: _buildCombinationButtons)),
9794
ExampleItem(desc: '通栏按钮', builder: _buildFilledFillButton),
9895
]),
9996
ExampleModule(title: '组件状态', children: [
@@ -236,8 +233,7 @@ class _TDButtonPageState extends State<TDButtonPage> {
236233
),
237234
);
238235
}),
239-
ExampleItem(
240-
ignoreCode: true, desc: '各种按钮状态测试', builder: _buildStatusDisplay),
236+
ExampleItem(ignoreCode: true, desc: '各种按钮状态测试', builder: _buildStatusDisplay),
241237
ExampleItem(
242238
ignoreCode: true,
243239
desc: '按钮中路由跳转',
@@ -247,8 +243,7 @@ class _TDButtonPageState extends State<TDButtonPage> {
247243
size: TDButtonSize.large,
248244
shape: TDButtonShape.rectangle,
249245
onTap: () async {
250-
var result = await Navigator.of(context)
251-
.pushNamedAndRemoveUntil('divider', (router) {
246+
var result = await Navigator.of(context).pushNamedAndRemoveUntil('divider', (router) {
252247
return true;
253248
});
254249
print('pushNamedAndRemoveUntil result: $result');
@@ -261,6 +256,12 @@ class _TDButtonPageState extends State<TDButtonPage> {
261256
builder: (context) {
262257
return CodeWrapper(builder: _buildRightIconButton);
263258
}),
259+
ExampleItem(
260+
ignoreCode: true,
261+
desc: '渐变色背景按钮',
262+
builder: (context) {
263+
return CodeWrapper(builder: _buildGradientButton);
264+
}),
264265
],
265266
);
266267
}
@@ -699,6 +700,49 @@ class _TDButtonPageState extends State<TDButtonPage> {
699700
);
700701
}
701702

703+
@Demo(group: 'button')
704+
Widget _buildGradientButton(BuildContext context) {
705+
return const Wrap(
706+
spacing: 16,
707+
runSpacing: 16,
708+
alignment: WrapAlignment.center,
709+
children: [
710+
TDButton(
711+
text: '填充按钮',
712+
icon: TDIcons.app,
713+
size: TDButtonSize.large,
714+
type: TDButtonType.fill,
715+
shape: TDButtonShape.rectangle,
716+
theme: TDButtonTheme.primary,
717+
iconPosition: TDButtonIconPosition.right,
718+
gradient: LinearGradient(colors: [Colors.red, Colors.blue]),
719+
),
720+
TDButton(
721+
icon: TDIcons.app,
722+
size: TDButtonSize.large,
723+
type: TDButtonType.fill,
724+
shape: TDButtonShape.rectangle,
725+
theme: TDButtonTheme.primary,
726+
iconPosition: TDButtonIconPosition.right,
727+
gradient: LinearGradient(
728+
colors: [Colors.red, Colors.blue], begin: Alignment.topCenter, end: Alignment.bottomCenter),
729+
),
730+
TDButton(
731+
text: '间距20',
732+
icon: TDIcons.app,
733+
size: TDButtonSize.large,
734+
type: TDButtonType.fill,
735+
shape: TDButtonShape.rectangle,
736+
theme: TDButtonTheme.primary,
737+
iconPosition: TDButtonIconPosition.right,
738+
iconTextSpacing: 20,
739+
gradient: LinearGradient(
740+
colors: [Colors.red, Colors.blue], begin: Alignment.centerRight, end: Alignment.centerLeft),
741+
)
742+
],
743+
);
744+
}
745+
702746
Widget _buildStatusDisplay(BuildContext context) {
703747
return ListView(
704748
shrinkWrap: true,
@@ -722,8 +766,7 @@ class _TDButtonPageState extends State<TDButtonPage> {
722766
icon: TDIcons.app,
723767
text: 'Button',
724768
theme: TDButtonTheme.primary,
725-
style: TDButtonStyle.generateFillStyleByTheme(
726-
context, TDButtonTheme.primary, TDButtonStatus.active),
769+
style: TDButtonStyle.generateFillStyleByTheme(context, TDButtonTheme.primary, TDButtonStatus.active),
727770
),
728771
const TDButton(
729772
icon: TDIcons.app,
@@ -750,8 +793,7 @@ class _TDButtonPageState extends State<TDButtonPage> {
750793
icon: TDIcons.app,
751794
text: 'Button',
752795
theme: TDButtonTheme.light,
753-
style: TDButtonStyle.generateFillStyleByTheme(
754-
context, TDButtonTheme.light, TDButtonStatus.active),
796+
style: TDButtonStyle.generateFillStyleByTheme(context, TDButtonTheme.light, TDButtonStatus.active),
755797
),
756798
const TDButton(
757799
icon: TDIcons.app,
@@ -778,8 +820,8 @@ class _TDButtonPageState extends State<TDButtonPage> {
778820
icon: TDIcons.app,
779821
text: 'Button',
780822
theme: TDButtonTheme.defaultTheme,
781-
style: TDButtonStyle.generateFillStyleByTheme(
782-
context, TDButtonTheme.defaultTheme, TDButtonStatus.active),
823+
style:
824+
TDButtonStyle.generateFillStyleByTheme(context, TDButtonTheme.defaultTheme, TDButtonStatus.active),
783825
),
784826
const TDButton(
785827
icon: TDIcons.app,
@@ -806,8 +848,7 @@ class _TDButtonPageState extends State<TDButtonPage> {
806848
icon: TDIcons.app,
807849
text: 'Button',
808850
theme: TDButtonTheme.danger,
809-
style: TDButtonStyle.generateFillStyleByTheme(
810-
context, TDButtonTheme.danger, TDButtonStatus.active),
851+
style: TDButtonStyle.generateFillStyleByTheme(context, TDButtonTheme.danger, TDButtonStatus.active),
811852
),
812853
const TDButton(
813854
icon: TDIcons.app,
@@ -837,8 +878,7 @@ class _TDButtonPageState extends State<TDButtonPage> {
837878
icon: TDIcons.app,
838879
text: 'Button',
839880
theme: TDButtonTheme.primary,
840-
style: TDButtonStyle.generateOutlineStyleByTheme(
841-
context, TDButtonTheme.primary, TDButtonStatus.active),
881+
style: TDButtonStyle.generateOutlineStyleByTheme(context, TDButtonTheme.primary, TDButtonStatus.active),
842882
type: TDButtonType.outline,
843883
),
844884
const TDButton(
@@ -868,8 +908,7 @@ class _TDButtonPageState extends State<TDButtonPage> {
868908
icon: TDIcons.app,
869909
text: 'Button',
870910
theme: TDButtonTheme.light,
871-
style: TDButtonStyle.generateOutlineStyleByTheme(
872-
context, TDButtonTheme.light, TDButtonStatus.active),
911+
style: TDButtonStyle.generateOutlineStyleByTheme(context, TDButtonTheme.light, TDButtonStatus.active),
873912
type: TDButtonType.outline,
874913
),
875914
const TDButton(
@@ -930,8 +969,7 @@ class _TDButtonPageState extends State<TDButtonPage> {
930969
icon: TDIcons.app,
931970
text: 'Button',
932971
theme: TDButtonTheme.danger,
933-
style: TDButtonStyle.generateOutlineStyleByTheme(
934-
context, TDButtonTheme.danger, TDButtonStatus.active),
972+
style: TDButtonStyle.generateOutlineStyleByTheme(context, TDButtonTheme.danger, TDButtonStatus.active),
935973
type: TDButtonType.outline,
936974
),
937975
const TDButton(
@@ -963,8 +1001,7 @@ class _TDButtonPageState extends State<TDButtonPage> {
9631001
icon: TDIcons.app,
9641002
text: 'Button',
9651003
theme: TDButtonTheme.primary,
966-
style: TDButtonStyle.generateTextStyleByTheme(
967-
context, TDButtonTheme.primary, TDButtonStatus.active),
1004+
style: TDButtonStyle.generateTextStyleByTheme(context, TDButtonTheme.primary, TDButtonStatus.active),
9681005
type: TDButtonType.text,
9691006
),
9701007
const TDButton(
@@ -994,8 +1031,7 @@ class _TDButtonPageState extends State<TDButtonPage> {
9941031
icon: TDIcons.app,
9951032
text: 'Button',
9961033
theme: TDButtonTheme.light,
997-
style: TDButtonStyle.generateTextStyleByTheme(
998-
context, TDButtonTheme.light, TDButtonStatus.active),
1034+
style: TDButtonStyle.generateTextStyleByTheme(context, TDButtonTheme.light, TDButtonStatus.active),
9991035
type: TDButtonType.text,
10001036
),
10011037
const TDButton(
@@ -1025,8 +1061,8 @@ class _TDButtonPageState extends State<TDButtonPage> {
10251061
icon: TDIcons.app,
10261062
text: 'Button',
10271063
theme: TDButtonTheme.defaultTheme,
1028-
style: TDButtonStyle.generateTextStyleByTheme(
1029-
context, TDButtonTheme.defaultTheme, TDButtonStatus.active),
1064+
style:
1065+
TDButtonStyle.generateTextStyleByTheme(context, TDButtonTheme.defaultTheme, TDButtonStatus.active),
10301066
type: TDButtonType.text,
10311067
),
10321068
const TDButton(
@@ -1056,8 +1092,7 @@ class _TDButtonPageState extends State<TDButtonPage> {
10561092
icon: TDIcons.app,
10571093
text: 'Button',
10581094
theme: TDButtonTheme.danger,
1059-
style: TDButtonStyle.generateTextStyleByTheme(
1060-
context, TDButtonTheme.danger, TDButtonStatus.active),
1095+
style: TDButtonStyle.generateTextStyleByTheme(context, TDButtonTheme.danger, TDButtonStatus.active),
10611096
type: TDButtonType.text,
10621097
),
10631098
const TDButton(
@@ -1090,8 +1125,7 @@ class _TDButtonPageState extends State<TDButtonPage> {
10901125
icon: TDIcons.app,
10911126
text: 'Button',
10921127
theme: TDButtonTheme.primary,
1093-
style: TDButtonStyle.generateGhostStyleByTheme(
1094-
context, TDButtonTheme.primary, TDButtonStatus.active),
1128+
style: TDButtonStyle.generateGhostStyleByTheme(context, TDButtonTheme.primary, TDButtonStatus.active),
10951129
type: TDButtonType.ghost,
10961130
),
10971131
const TDButton(
@@ -1122,8 +1156,7 @@ class _TDButtonPageState extends State<TDButtonPage> {
11221156
icon: TDIcons.app,
11231157
text: 'Button',
11241158
theme: TDButtonTheme.light,
1125-
style: TDButtonStyle.generateGhostStyleByTheme(
1126-
context, TDButtonTheme.light, TDButtonStatus.active),
1159+
style: TDButtonStyle.generateGhostStyleByTheme(context, TDButtonTheme.light, TDButtonStatus.active),
11271160
type: TDButtonType.ghost,
11281161
),
11291162
const TDButton(
@@ -1154,8 +1187,8 @@ class _TDButtonPageState extends State<TDButtonPage> {
11541187
icon: TDIcons.app,
11551188
text: 'Button',
11561189
theme: TDButtonTheme.defaultTheme,
1157-
style: TDButtonStyle.generateGhostStyleByTheme(
1158-
context, TDButtonTheme.defaultTheme, TDButtonStatus.active),
1190+
style:
1191+
TDButtonStyle.generateGhostStyleByTheme(context, TDButtonTheme.defaultTheme, TDButtonStatus.active),
11591192
type: TDButtonType.ghost,
11601193
),
11611194
const TDButton(
@@ -1186,8 +1219,7 @@ class _TDButtonPageState extends State<TDButtonPage> {
11861219
icon: TDIcons.app,
11871220
text: 'Button',
11881221
theme: TDButtonTheme.danger,
1189-
style: TDButtonStyle.generateGhostStyleByTheme(
1190-
context, TDButtonTheme.danger, TDButtonStatus.active),
1222+
style: TDButtonStyle.generateGhostStyleByTheme(context, TDButtonTheme.danger, TDButtonStatus.active),
11911223
type: TDButtonType.ghost,
11921224
),
11931225
const TDButton(

‎tdesign-component/lib/src/components/button/td_button.dart‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ class TDButton extends StatefulWidget {
4343
this.margin,
4444
this.padding,
4545
this.iconPosition = TDButtonIconPosition.left,
46+
this.gradient,
4647
}) : super(key: key);
4748

4849
/// 自控件
@@ -114,6 +115,9 @@ class TDButton extends StatefulWidget {
114115
/// 是否为通栏按钮
115116
final bool isBlock;
116117

118+
/// 渐变背景色，优先级高于backgroundColor
119+
final Gradient? gradient;
120+
117121
@override
118122
State<StatefulWidget> createState() => _TDButtonState();
119123
}
@@ -176,7 +180,8 @@ class _TDButtonState extends State<TDButton> {
176180
padding: _getPadding(),
177181
margin: _margin,
178182
decoration: BoxDecoration(
179-
color: style.backgroundColor,
183+
color: widget.gradient != null ? null : style.backgroundColor,
184+
gradient: widget.gradient,
180185
border: _getBorder(context),
181186
borderRadius: style.radius ?? BorderRadius.all(_getRadius()),
182187
),

‎tdesign-component/lib/src/components/button/td_button_style.dart‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,11 @@ class TDButtonStyle {
1919
/// 自定义圆角
2020
BorderRadiusGeometry? radius;
2121

22+
/// 渐变背景色
23+
Gradient? gradient;
24+
2225
TDButtonStyle(
23-
{this.backgroundColor, this.frameColor, this.textColor, this.frameWidth, this.radius});
26+
{this.backgroundColor, this.frameColor, this.textColor, this.frameWidth, this.radius, this.gradient});
2427

2528
/// 生成不同主题的填充按钮样式
2629
TDButtonStyle.generateFillStyleByTheme(
@@ -201,4 +204,4 @@ class TDButtonStyle {
201204
return TDTheme.of(context).bgColorComponentDisabled;
202205
}
203206
}
204-
}
207+
}

0 commit comments

Comments
 (0)