最简单改变 TabLayout Indicator 宽度的方法

Android

2024-01-03 23:02:54

自定义 Flutter 中 TabLayout Indicator 宽度

了解 TabLayout 的 Indicator

TabLayout 的 Indicator 是一个指示当前选中标签的控件。默认情况下，Indicator 的宽度与选项卡宽度一致。然而，您可以自定义 Indicator 宽度，使其更窄或更宽。

自定义 Indicator 宽度

1. 设置 TabLayout 宽度

首先，为 TabLayout 设置一个固定宽度。这将确定 Indicator 的最大潜在宽度。

2. 设置子容器宽度

TabLayout 控件有一个子容器，通常是一个行或列控件。为子容器设置一个固定宽度，该宽度小于 TabLayout 宽度。

3. 设置 Indicator 宽度

最后，为 Indicator 控件设置一个固定宽度，该宽度小于或等于子容器宽度。

示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('自定义 Indicator 宽度'),
          bottom: TabBar(
            tabs: [
              Tab(text: '选项卡一'),
              Tab(text: '选项卡二'),
              Tab(text: '选项卡三'),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Center(child: Text('选项卡一的内容')),
            Center(child: Text('选项卡二的内容')),
            Center(child: Text('选项卡三的内容')),
          ],
        ),
      ),
    );
  }
}