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.

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/tdTabBar 新增tabAlignment #328

Merged
merged 1 commit into from
Sep 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import '../../../tdesign_flutter.dart';

const double _kTabHeight = 46.0;
const double _kTextAndIconTabHeight = 72.0;

const double _kStartOffset = 52.0;
class _TabStyle extends AnimatedWidget {
const _TabStyle({
Key? key,
Expand Down Expand Up @@ -127,6 +127,7 @@ class TDHorizontalTabBar extends StatefulWidget implements PreferredSizeWidget {
this.backgroundColor,
this.selectedBgColor,
this.unSelectedBgColor,
this.tabAlignment
}) : assert(indicator != null || (indicatorWeight > 0.0)),
super(key: key);

Expand Down Expand Up @@ -323,6 +324,7 @@ class TDHorizontalTabBar extends StatefulWidget implements PreferredSizeWidget {
/// 未选中背景色
final Color? unSelectedBgColor;

final TabAlignment? tabAlignment;
/// A size whose height depends on if the tabs have both icons and text.
///
/// [AppBar] uses this size to compute its own preferred size.
Expand Down Expand Up @@ -823,9 +825,32 @@ class _TDHorizontalTabBarState extends State<TDHorizontalTabBar> {
}
return null;
}

TabAlignment get _defaults {
return widget.isScrollable ? TabAlignment.start : TabAlignment.fill;
}
bool _debugTabAlignmentIsValid(TabAlignment tabAlignment) {
assert(() {
if (widget.isScrollable && tabAlignment == TabAlignment.fill) {
throw FlutterError(
'$tabAlignment is only valid for non-scrollable tab bars.',
);
}
if (!widget.isScrollable
&& (tabAlignment == TabAlignment.start
|| tabAlignment == TabAlignment.startOffset)) {
throw FlutterError(
'$tabAlignment is only valid for scrollable tab bars.',
);
}
return true;
}());
return true;
}
@override
Widget build(BuildContext context) {
final tabBarTheme = TabBarTheme.of(context);
final TabAlignment effectiveTabAlignment = widget.tabAlignment ?? tabBarTheme.tabAlignment ?? _defaults;
assert(_debugTabAlignmentIsValid(effectiveTabAlignment));
assert(debugCheckHasMaterialLocalizations(context));
assert(() {
if (_controller!.length != widget.tabs.length) {
Expand All @@ -843,7 +868,7 @@ class _TDHorizontalTabBarState extends State<TDHorizontalTabBar> {
);
}

final tabBarTheme = TabBarTheme.of(context);


final wrappedTabs = List<Widget>.generate(widget.tabs.length, (int index) {
const verticalAdjustment = (_kTextAndIconTabHeight - _kTabHeight) / 2.0;
Expand Down Expand Up @@ -961,7 +986,7 @@ class _TDHorizontalTabBarState extends State<TDHorizontalTabBar> {
),
),
);
if (!widget.isScrollable) {
if (!widget.isScrollable && effectiveTabAlignment == TabAlignment.fill) {
wrappedTabs[index] = Expanded(child: wrappedTabs[index]);
}
}
Expand All @@ -977,18 +1002,21 @@ class _TDHorizontalTabBarState extends State<TDHorizontalTabBar> {
unselectedLabelStyle: widget.unselectedLabelStyle,
child: _TabLabelBar(
onPerformLayout: _saveTabOffsets,
mainAxisSize: effectiveTabAlignment == TabAlignment.fill ? MainAxisSize.max : MainAxisSize.min,
children: wrappedTabs,
),
),
);

if (widget.isScrollable) {
final EdgeInsetsGeometry? effectivePadding = effectiveTabAlignment == TabAlignment.startOffset
? const EdgeInsetsDirectional.only(start: _kStartOffset).add(widget.padding ?? EdgeInsets.zero): widget.padding;
_scrollController ??= _TabBarScrollController(this);
tdHorizontalTabBar = SingleChildScrollView(
dragStartBehavior: widget.dragStartBehavior,
scrollDirection: Axis.horizontal,
controller: _scrollController,
padding: widget.padding,
padding: effectivePadding,
physics: widget.physics,
child: tdHorizontalTabBar,
);
Expand Down Expand Up @@ -1125,11 +1153,11 @@ class _TabLabelBar extends Flex {
Key? key,
List<Widget> children = const <Widget>[],
required this.onPerformLayout,
required super.mainAxisSize,
}) : super(
key: key,
children: children,
direction: Axis.horizontal,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
verticalDirection: VerticalDirection.down,
Expand Down
3 changes: 3 additions & 0 deletions tdesign-component/lib/src/components/tabs/td_tab_bar.dart
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ class TDTabBar extends StatefulWidget {
this.dividerHeight = 0.5,
this.selectedBgColor,
this.unSelectedBgColor,
this.tabAlignment,
}) : assert(
backgroundColor == null || decoration == null,
'Cannot provide both a backgroundColor and a decoration\n'
Expand Down Expand Up @@ -124,6 +125,7 @@ class TDTabBar extends StatefulWidget {
/// 未选中背景色,只有outlineType为capsule时有效
final Color? unSelectedBgColor;

final TabAlignment? tabAlignment;
@override
State<StatefulWidget> createState() => _TDTabBarState();
}
Expand Down Expand Up @@ -165,6 +167,7 @@ class _TDTabBarState extends State<TDTabBar> {
backgroundColor: widget.backgroundColor,
selectedBgColor: widget.selectedBgColor,
unSelectedBgColor: widget.unSelectedBgColor,
tabAlignment:widget.tabAlignment,
onTap: (index) {
widget.onTap?.call(index);
},
Expand Down