Skip to content

style(radio): 对齐小程序示例分组与特殊样式 #1049

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

Open
RSS1102 wants to merge 5 commits into
base: develop
Choose a base branch
from
Open

style(radio): 对齐小程序示例分组与特殊样式 #1049

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7d6be5f
style(radio): 对齐小程序示例分组与特殊样式
RSS1102 Aug 23, 2026
0866ace
fix(radio): 隔离示例状态并补充视觉回归
RSS1102 Aug 24, 2026
c14adf3
[autofix.ci] apply automated fixes
autofix-ci[bot] Aug 24, 2026
eee0e69
fix(radio): distinguish special card demos
RSS1102 Aug 24, 2026
aa5a49a
Merge branch 'develop' into rss1102/style/radio-miniprogram-alignment
RSS1102 Aug 26, 2026
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
25 changes: 5 additions & 20 deletions tdesign-component/example/assets/code/radio._disabledRadios.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,9 @@
Widget _disabledRadios(BuildContext context) {
return Column(
children: [
const TRadioGroup<String>(
value: 'a',
options: [
TRadioOption(value: 'a', label: '整组禁用'),
TRadioOption(value: 'b', label: '不可选择'),
],
),
const SizedBox(height: 16),
TRadioGroup<String>(
value: _itemDisabledValue,
options: const [
TRadioOption(value: 'a', label: '正常选项 A'),
TRadioOption(value: 'b', label: '正常选项 B'),
TRadioOption(value: 'c', label: '禁用-已选', disabled: true),
TRadioOption(value: 'd', label: '禁用-未选', disabled: true),
],
onChanged: (value) => setState(() => _itemDisabledValue = value),
),
return const TRadioGroup<String>(
value: 'a',
options: [
TRadioOption(value: 'a', label: '单选-已选'),
TRadioOption(value: 'b', label: '单选-未选'),
],
);
}
10 changes: 0 additions & 10 deletions tdesign-component/example/assets/code/radio._horizontalCardRadios.txt
View file
Open in desktop

This file was deleted.

13 changes: 0 additions & 13 deletions tdesign-component/example/assets/code/radio._positions.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,6 @@ Widget _positions(BuildContext context) {
contentDirection: TContentDirection.left,
onChanged: (value) => setState(() => _positionValue = value),
),
TRadio<String>(
value: 'custom',
groupValue: _positionValue,
title: '自定义指示器',
customIconBuilder: (context, selected, disabled) => Icon(
selected ? Icons.check_circle : Icons.radio_button_unchecked,
color: disabled
? context.tTheme.brandDisabledColor
: context.tTheme.brandNormalColor,
size: 24,
),
onChanged: (value) => setState(() => _positionValue = value),
),
],
);
}
26 changes: 26 additions & 0 deletions tdesign-component/example/assets/code/radio._specialRadios.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
Widget _specialRadios(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TRadioGroup<String>(
value: _verticalSpecialCardValue,
options: _specialCardOptions,
cardMode: true,
itemBuilder: _buildSpecialCardItem,
onChanged: (value) =>
setState(() => _verticalSpecialCardValue = value),
),
const SizedBox(height: 24),
const TText('横向卡片单选框'),
TRadioGroup<String>(
value: _horizontalCardValue,
options: _specialCardOptions,
cardMode: true,
direction: Axis.horizontal,
columns: 2,
itemBuilder: _buildSpecialCardItem,
onChanged: (value) => setState(() => _horizontalCardValue = value),
),
],
);
}
164 changes: 106 additions & 58 deletions tdesign-component/example/lib/page/t_radio_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,17 @@ class TRadioPage extends StatefulWidget {

class _TRadioPageState extends State<TRadioPage> {
static const _options = [
TRadioOption(value: 'a', label: '单选 A'),
TRadioOption(value: 'b', label: '单选 B', subTitle: '描述信息'),
TRadioOption(value: 'c', label: '单选 C'),
TRadioOption(value: 'd', label: '单选 D'),
TRadioOption(value: 'a', label: '单选'),
TRadioOption(value: 'b', label: '单选'),
TRadioOption(value: 'c', label: '单选标题多行单选标题多行单选标题多行单选标题多行'),
TRadioOption(value: 'd', label: '单选', subTitle: '描述信息描述信息描述信息描述信息描述信息'),
];
static const _cardOptions = [
TRadioOption(value: 'a', label: '单选'),
TRadioOption(value: 'b', label: '单选'),
TRadioOption(value: 'c', label: '单选标题多行单选标题多行单选标题多行'),
];
static const _specialCardOptions = [
TRadioOption(value: 'a', label: '单选', subTitle: '描述信息'),
TRadioOption(value: 'b', label: '单选', subTitle: '描述信息'),
TRadioOption(value: 'c', label: '单选', subTitle: '描述信息'),
Expand All @@ -27,9 +32,9 @@ class _TRadioPageState extends State<TRadioPage> {
String? _verticalValue = 'a';
String? _horizontalValue = 'b';
String? _verticalCardValue = 'a';
String? _verticalSpecialCardValue = 'a';
String? _horizontalCardValue = 'b';
String? _positionValue = 'left';
String? _itemDisabledValue = 'c';

@override
Widget build(BuildContext context) {
Expand All @@ -38,18 +43,28 @@ class _TRadioPageState extends State<TRadioPage> {
desc: '用于在一组选项中执行单项选择。',
exampleCodeGroup: 'radio',
children: [
ExampleModule(title: '组件类型', children: [
ExampleItem(desc: '纵向单选框', builder: _verticalRadios),
ExampleItem(desc: '横向单选框', builder: _horizontalRadios),
]),
ExampleModule(title: '组件状态', children: [
ExampleItem(desc: '禁用状态', builder: _disabledRadios),
]),
ExampleModule(title: '组件样式', children: [
ExampleItem(desc: '勾选显示位置', builder: _positions),
ExampleItem(desc: '纵向一列卡片单选框', builder: _verticalCardRadios),
ExampleItem(desc: '横向两列卡片单选框', builder: _horizontalCardRadios),
]),
ExampleModule(
title: '组件类型',
children: [
ExampleItem(desc: '纵向单选框', builder: _verticalRadios),
ExampleItem(desc: '横向单选框', builder: _horizontalRadios),
],
),
ExampleModule(
title: '组件状态',
children: [ExampleItem(desc: '单选框状态', builder: _disabledRadios)],
),
ExampleModule(
title: '组件样式',
children: [
ExampleItem(desc: '勾选显示位置', builder: _positions),
ExampleItem(desc: '非通栏单选样式', builder: _verticalCardRadios),
],
),
ExampleModule(
title: '特殊样式',
children: [ExampleItem(desc: '纵向/横向卡片单选框', builder: _specialRadios)],
),
],
);
}
Expand Down Expand Up @@ -77,26 +92,11 @@ class _TRadioPageState extends State<TRadioPage> {

@ExampleCode(group: 'radio')
Widget _disabledRadios(BuildContext context) {
return Column(
children: [
const TRadioGroup<String>(
value: 'a',
options: [
TRadioOption(value: 'a', label: '整组禁用'),
TRadioOption(value: 'b', label: '不可选择'),
],
),
const SizedBox(height: 16),
TRadioGroup<String>(
value: _itemDisabledValue,
options: const [
TRadioOption(value: 'a', label: '正常选项 A'),
TRadioOption(value: 'b', label: '正常选项 B'),
TRadioOption(value: 'c', label: '禁用-已选', disabled: true),
TRadioOption(value: 'd', label: '禁用-未选', disabled: true),
],
onChanged: (value) => setState(() => _itemDisabledValue = value),
),
return const TRadioGroup<String>(
value: 'a',
options: [
TRadioOption(value: 'a', label: '单选-已选'),
TRadioOption(value: 'b', label: '单选-未选'),
],
);
}
Expand All @@ -118,19 +118,6 @@ class _TRadioPageState extends State<TRadioPage> {
contentDirection: TContentDirection.left,
onChanged: (value) => setState(() => _positionValue = value),
),
TRadio<String>(
value: 'custom',
groupValue: _positionValue,
title: '自定义指示器',
customIconBuilder: (context, selected, disabled) => Icon(
selected ? Icons.check_circle : Icons.radio_button_unchecked,
color: disabled
? context.tTheme.brandDisabledColor
: context.tTheme.brandNormalColor,
size: 24,
),
onChanged: (value) => setState(() => _positionValue = value),
),
],
);
}
Expand All @@ -146,14 +133,75 @@ class _TRadioPageState extends State<TRadioPage> {
}

@ExampleCode(group: 'radio')
Widget _horizontalCardRadios(BuildContext context) {
return TRadioGroup<String>(
value: _horizontalCardValue,
options: _cardOptions,
cardMode: true,
direction: Axis.horizontal,
columns: 2,
onChanged: (value) => setState(() => _horizontalCardValue = value),
Widget _specialRadios(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TRadioGroup<String>(
value: _verticalSpecialCardValue,
options: _specialCardOptions,
cardMode: true,
itemBuilder: _buildSpecialCardItem,
onChanged: (value) =>
setState(() => _verticalSpecialCardValue = value),
),
const SizedBox(height: 24),
const TText('横向卡片单选框'),
TRadioGroup<String>(
value: _horizontalCardValue,
options: _specialCardOptions,
cardMode: true,
direction: Axis.horizontal,
columns: 2,
itemBuilder: _buildSpecialCardItem,
onChanged: (value) => setState(() => _horizontalCardValue = value),
),
],
);
}

Widget _buildSpecialCardItem(
BuildContext context,
TRadioOption<String> option,
bool selected,
bool disabled,
) {
final theme = context.tTheme;
return Container(
constraints: const BoxConstraints(minHeight: 82),
padding: EdgeInsets.symmetric(
horizontal: theme.spacer16,
vertical: theme.spacer12,
),
decoration: BoxDecoration(
color: selected ? theme.brandColor1 : theme.grayColor1,
border: Border.all(
color: selected ? theme.brandNormalColor : theme.componentBorderColor,
),
borderRadius: BorderRadius.circular(theme.radiusDefault),
),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
TText(option.label),
if (option.subTitle != null) ...[
SizedBox(height: theme.spacer4),
TText(
option.subTitle!,
style: TextStyle(color: theme.textColorSecondary),
),
],
],
),
),
if (selected)
Icon(Icons.check_circle, color: theme.brandNormalColor, size: 24),
],
),
);
}
}
Binary file added tdesign-component/example/test/goldens/radio_page_dark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added tdesign-component/example/test/goldens/radio_page_light.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading