关于Tabs里面tabBar样式问题

1. 如果tab的数量比较少怎么能够实现靠左显示，目前好像只能居中。

2. 如果自定义tabBar，在滚动的时候怎么能让当前选中合适的栏目进行居中显示，不合适的靠左靠右的不移动。

HarmonyOS

superinsect

2024-09-29 13:39:07

浏览

回答 2

待解决

回答 2

按赞同

按时间

鱼弦CTO

在Flutter中，对于TabBar的样式和行为进行自定义是很常见的需求。以下是解决你提到的两个问题的方法：

### 问题1: Tab数量较少时靠左显示

默认情况下，TabBar会在标签数量较少时居中显示。如果你希望标签靠左显示，可以使用Align和Container来实现。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Tabs Example'),
            bottom: PreferredSize(
              preferredSize: Size.fromHeight(50.0),
              child: Align(
                alignment: Alignment.centerLeft,
                child: Container(
                  width: MediaQuery.of(context).size.width / 2, // Adjust the width as per your need
                  child: TabBar(
                    isScrollable: true,
                    tabs: [
                      Tab(text: "Tab 1"),
                      Tab(text: "Tab 2"),
                      Tab(text: "Tab 3"),
                    ],
                  ),
                ),
              ),
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text("Tab 1 content")),
              Center(child: Text("Tab 2 content")),
              Center(child: Text("Tab 3 content")),
            ],
          ),
        ),
      ),
    );
  }
}

这里，我们通过Align和Container包装TabBar，并设置其宽度为屏幕宽度的一部分，实现了标签靠左显示。

### 问题2: 自定义TabBar，在滚动的时候让当前选中的栏目居中显示

要实现这个效果，需要一些额外的逻辑来监听TabController的状态，并自动滚动TabBar使选中的标签居中显示。下面是一个示例代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CustomTabsPage(),
    );
  }
}

class CustomTabsPage extends StatefulWidget {
  @override
  _CustomTabsPageState createState() => _CustomTabsPageState();
}

class _CustomTabsPageState extends State<CustomTabsPage> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  late ScrollController _scrollController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 10, vsync: this);
    _scrollController = ScrollController();

    _tabController.addListener(() {
      if (_tabController.indexIsChanging) {
        _scrollToCenter(_tabController.index);
      }
    });
  }

  void _scrollToCenter(int index) {
    final double screenWidth = MediaQuery.of(context).size.width;
    final double tabWidth = screenWidth / 3; // Assuming each tab takes 1/3 of the screen width
    final double offset = (index * tabWidth) - (screenWidth / 2) + (tabWidth / 2);

    _scrollController.animateTo(
      offset,
      duration: Duration(milliseconds: 300),
      curve: Curves.easeInOut,
    );
  }

  @override
  void dispose() {
    _tabController.dispose();
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Tabs Example'),
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(50.0),
          child: SingleChildScrollView(
            controller: _scrollController,
            scrollDirection: Axis.horizontal,
            child: Row(
              children: List.generate(10, (index) {
                return GestureDetector(
                  onTap: () {
                    _tabController.animateTo(index);
                    _scrollToCenter(index);
                  },
                  child: Container(
                    padding: EdgeInsets.symmetric(horizontal: 20.0),
                    child: Tab(
                      text: "Tab $index",
                    ),
                  ),
                );
              }),
            ),
          ),
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: List.generate(10, (index) {
          return Center(child: Text("Tab $index content"));
        }),
      ),
    );
  }
}

这个示例实现了一个自定义的TabBar，其中：