refactor(empty-state): 空状态支持内容居中
This commit is contained in:
1 parent
59fbd33059
commit
7463d3ee26
8 files changed
+131
-80
No files matched your search
@@ -5,12 +5,12 @@ import 'package:flutter/material.dart';
|
||||
import '../theme/app_colors.dart';
|
||||
import '../theme/app_dimens.dart';
|
||||
|
||||
const double _regularIconSize = 72;
|
||||
const double _compactIconSize = 44;
|
||||
const double _iconSize = 72;
|
||||
const double _maxContentWidth = 260;
|
||||
const double _regularHorizontal = 24;
|
||||
const double _regularVertical = 28;
|
||||
const double _compactPad = 16;
|
||||
const double _compactHorizontal = 16;
|
||||
const double _compactVertical = 4;
|
||||
const double _regularGap = 20;
|
||||
const double _compactGap = 12;
|
||||
const double _actionMinHeight = 44;
|
||||
@@ -27,6 +27,7 @@ class EmptyState extends StatelessWidget {
|
||||
this.onAction,
|
||||
this.footer,
|
||||
this.compact = false,
|
||||
this.stretchContent = false,
|
||||
});
|
||||
|
||||
final IconData icon;
|
||||
@@ -38,6 +39,9 @@ class EmptyState extends StatelessWidget {
|
||||
final Widget? footer;
|
||||
final bool compact;
|
||||
|
||||
/// 让图标和文案占满内容宽度,适用于需要严格居中的宽版空状态。
|
||||
final bool stretchContent;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final hasAction = actionLabel != null && onAction != null;
|
||||
@@ -48,28 +52,33 @@ class EmptyState extends StatelessWidget {
|
||||
child: Padding(
|
||||
key: const Key('empty-state-padding'),
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: compact ? _compactPad : _regularHorizontal,
|
||||
vertical: compact ? _compactPad : _regularVertical,
|
||||
horizontal: compact ? _compactHorizontal : _regularHorizontal,
|
||||
vertical: compact ? _compactVertical : _regularVertical,
|
||||
),
|
||||
child: Semantics(
|
||||
container: true,
|
||||
label: title,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
ExcludeSemantics(
|
||||
child: _EmptyMark(icon: icon, compact: compact),
|
||||
),
|
||||
SizedBox(height: compact ? _compactGap : _regularGap),
|
||||
_EmptyCopy(
|
||||
title: title,
|
||||
subtitle: subtitle,
|
||||
actionLabel: hasAction ? actionLabel : null,
|
||||
actionKey: actionKey,
|
||||
onAction: hasAction ? onAction : null,
|
||||
footer: footer,
|
||||
),
|
||||
],
|
||||
child: SizedBox(
|
||||
width: stretchContent ? double.infinity : null,
|
||||
child: Semantics(
|
||||
container: true,
|
||||
label: title,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
ExcludeSemantics(child: _EmptyMark(icon: icon)),
|
||||
SizedBox(height: compact ? _compactGap : _regularGap),
|
||||
SizedBox(
|
||||
width: stretchContent ? double.infinity : null,
|
||||
child: _EmptyCopy(
|
||||
title: title,
|
||||
subtitle: subtitle,
|
||||
actionLabel: hasAction ? actionLabel : null,
|
||||
actionKey: actionKey,
|
||||
onAction: hasAction ? onAction : null,
|
||||
footer: footer,
|
||||
stretchContent: stretchContent,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -80,17 +89,16 @@ class EmptyState extends StatelessWidget {
|
||||
|
||||
/// 空列表只放一枚大图标,不画线框,也不铺底色。
|
||||
class _EmptyMark extends StatelessWidget {
|
||||
const _EmptyMark({required this.icon, required this.compact});
|
||||
const _EmptyMark({required this.icon});
|
||||
|
||||
final IconData icon;
|
||||
final bool compact;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Icon(
|
||||
icon,
|
||||
key: const Key('empty-state-icon'),
|
||||
size: compact ? _compactIconSize : _regularIconSize,
|
||||
size: _iconSize,
|
||||
color: AppColors.subtle,
|
||||
);
|
||||
}
|
||||
@@ -104,6 +112,7 @@ class _EmptyCopy extends StatelessWidget {
|
||||
required this.actionKey,
|
||||
required this.onAction,
|
||||
required this.footer,
|
||||
required this.stretchContent,
|
||||
});
|
||||
|
||||
final String title;
|
||||
@@ -112,11 +121,15 @@ class _EmptyCopy extends StatelessWidget {
|
||||
final Key? actionKey;
|
||||
final VoidCallback? onAction;
|
||||
final Widget? footer;
|
||||
final bool stretchContent;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: stretchContent
|
||||
? CrossAxisAlignment.stretch
|
||||
: CrossAxisAlignment.center,
|
||||
children: [
|
||||
ExcludeSemantics(
|
||||
child: Text(
|
||||
|
||||
Reference in new issue
Block a user