flutter 手写 TabBar

在Flutter中，可以通过TabBar和TabBarView控件来实现手写的标签栏。以下是一个简单的示例代码：

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('手写TabBar示例'),
            bottom: TabBar(
              tabs: <Widget>[
                Tab(text: '标签一'),
                Tab(text: '标签二'),
                Tab(text: '标签三'),
              ],
            ),
          ),
          body: TabBarView(
            children: <Widget>[
              Center(child: Text('标签一的内容')),
              Center(child: Text('标签二的内容')),
              Center(child: Text('标签三的内容')),
            ],
          ),
        ),
      ),
    );
  }
}

这段代码创建了一个带有三个标签的TabBar，每个标签对应TabBarView中的一个视图。DefaultTabController是用来管理标签状态的，其length属性设置为标签的数量。每个Tab是一个可以点击的标签项，而TabBarView则是一个根据当前选中的标签显示对应内容的视图容器。