wangjia
132 lines
4.0 KiB
Dart
132 lines
4.0 KiB
Dart
import 'package:flutter/material.dart';
|
|
import '../core/theme/context_tokens.dart';
|
|
|
|
/// 移动端列表卡片的单个字段（label: value）。
|
|
class MobileCardField {
|
|
final String label;
|
|
final String? value;
|
|
|
|
/// 自定义值控件（如带颜色的金额、状态徽章）；提供后忽略 [value]。
|
|
final Widget? valueWidget;
|
|
const MobileCardField(this.label, this.value, {this.valueWidget});
|
|
}
|
|
|
|
/// 窄屏（手机）列表的通用卡片：标题 + 右上角徽章 + 字段竖排 + 底部操作。
|
|
/// 替代宽屏的表格行，使一行数据在手机上可一屏读完、操作可点。
|
|
class MobileListCard extends StatelessWidget {
|
|
final Widget title;
|
|
final Widget? subtitle;
|
|
final Widget? trailing;
|
|
final List<MobileCardField> fields;
|
|
final List<Widget>? actions;
|
|
final VoidCallback? onTap;
|
|
|
|
const MobileListCard({
|
|
super.key,
|
|
required this.title,
|
|
this.subtitle,
|
|
this.trailing,
|
|
this.fields = const [],
|
|
this.actions,
|
|
this.onTap,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Card(
|
|
margin: EdgeInsets.zero,
|
|
elevation: 0,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(8),
|
|
side: BorderSide(color: Colors.grey.shade200),
|
|
),
|
|
child: InkWell(
|
|
borderRadius: BorderRadius.circular(8),
|
|
onTap: onTap,
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(12),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
DefaultTextStyle(
|
|
style: TextStyle(
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w600,
|
|
color: context.tokens.text,
|
|
),
|
|
child: title,
|
|
),
|
|
if (subtitle != null) ...[
|
|
const SizedBox(height: 2),
|
|
DefaultTextStyle(
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
color: context.tokens.muted),
|
|
child: subtitle!,
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
if (trailing != null) ...[
|
|
const SizedBox(width: 8),
|
|
trailing!,
|
|
],
|
|
],
|
|
),
|
|
if (fields.isNotEmpty) ...[
|
|
const SizedBox(height: 10),
|
|
...fields.map((f) => _buildField(context, f)),
|
|
],
|
|
if (actions != null && actions!.isNotEmpty) ...[
|
|
const Divider(height: 18),
|
|
Align(
|
|
alignment: Alignment.centerRight,
|
|
child: Wrap(
|
|
spacing: 4,
|
|
children: actions!,
|
|
),
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildField(BuildContext context, MobileCardField f) {
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 3),
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
SizedBox(
|
|
width: 64,
|
|
child: Text(
|
|
f.label,
|
|
style: TextStyle(
|
|
fontSize: 13, color: context.tokens.muted),
|
|
),
|
|
),
|
|
Expanded(
|
|
child: f.valueWidget ??
|
|
Text(
|
|
f.value ?? '—',
|
|
style: TextStyle(
|
|
fontSize: 13, color: context.tokens.text),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|