TabBar Flutter Widget 中的左填充错误

Question

你好，

设置：

在 Flutter StatefulWidget 中，我尝试使用底部参数将 TabBar 添加到 SliverAppBar。

问题：

一切运行良好，但我遇到了意外的左填充问题。 TabBar 中的第一个元素“Tab 1”在屏幕左侧和第一个 Tab 小部件的开头之间有很大的间隙。如何消除此填充，以便第一个小部件与屏幕最左侧齐平？

值得注意的是，滚动效果非常好，并且选项卡确实滚动经过此填充并离开左侧屏幕。此外，在我一直滚动到最后之后，右侧没有额外的填充。我提供了示例代码和图像以供参考。

非常感谢任何帮助！

代码：

import 'dart:math';
import 'package:flutter/material.dart';

class testScreen extends StatefulWidget {
  const testScreen({super.key});

  @override
  State<testScreen> createState() => _testScreenState();
}

class _testScreenState extends State<testScreen> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  final List<String> tabNames = ['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4', 'Tab 5', 'Tab 6', 'Tab 7', 'Tab 8'];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(
      length: 8,
      initialIndex: 0,
      vsync: this,
    );
  }

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

  @override
  Widget build(BuildContext context) {
    //final ThemeData theme = Theme.of(context);
    List<Widget> tabs = tabNames
        .map((name) => Container(
              child: Text(name),
              color: getRandomColor(),
            ))
        .toList();

    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: NestedScrollView(
        controller: ScrollController(),
        headerSliverBuilder: (context, value) {
          return [
            SliverAppBar(
              pinned: true,
              floating: true,
              snap: false,
              backgroundColor: Colors.blue.shade300,
              surfaceTintColor: Colors.transparent,
              forceElevated: true,
              title: SizedBox(
                height: kToolbarHeight,
                width: double.maxFinite,
                child: Container(
                  child: Text('Title', style: TextStyle(fontSize: 40)),
                  color: getRandomColor(),
                ),
              ),
              titleSpacing: 0,
              bottom: PreferredSize(
                preferredSize: Size.fromHeight(30),
                child: Container(
                  color: getRandomColor(),
                  child: TabBar(
                    padding: EdgeInsets.all(0),
                    controller: _tabController,
                    isScrollable: true,
                    tabs: tabs,
                  ),
                ),
              ),
            ),
          ];
        },
        body: Container(
          height: 1000,
          color: Colors.white,
        ),
      ),
    );
  }

  Color getRandomColor() {
    return Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256));
  }
}

环境：

 Flutter (Channel beta, 3.17.0-1.0.pre.3, on Microsoft Windows [Version 10.0.19045.3693], locale en-CA)
    • Flutter version 3.17.0-1.0.pre.3 on channel beta at C:\Dev\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 12b47270b7 (7 days ago), 2023-11-27 17:21:11 -0600
    • Engine revision dff66925dc
    • Dart version 3.3.0 (build 3.3.0-91.0.dev)
    • DevTools version 2.29.0

Answer 1

查看TabBar.tabAlignment

将其设置为

TabAlignment.start

应该可以修复填充。

tabAlignment: TabAlignment.start,