Flutter实现顶部按钮 Tabs联动切换功能

简介

Flutter是一种开源的移动应用开发框架，利用一套代码可以同时开发iOS和Android应用。本文介绍了如何使用Flutter实现一个顶部按钮 + Tabs联动切换的功能。

准备工作

在开始之前，确保你已经正确安装了Flutter开发环境并能够运行Flutter应用。

创建项目

使用以下命令创建一个新的Flutter项目：

flutter create top_button_tabs
cd top_button_tabs

导入依赖库

在pubspec.yaml文件中添加以下依赖库：

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2

然后运行flutter packages get安装依赖库。

实现顶部按钮

首先，我们需要创建一个顶部按钮的组件。在lib目录下创建一个新的top_button.dart文件，然后添加以下代码：

import 'package:flutter/material.dart';

class TopButton extends StatefulWidget {
  final String title;

  TopButton({this.title});

  @override
  _TopButtonState createState() => _TopButtonState();
}

class _TopButtonState extends State<TopButton> {
  bool _isSelected = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _isSelected = !_isSelected;
        });
      },
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        decoration: BoxDecoration(
          color: _isSelected ? Colors.blue : Colors.white,
          borderRadius: BorderRadius.circular(20),
          border: Border.all(color: Colors.blue, width: 2),
        ),
        child: Text(
          widget.title,
          style: TextStyle(
            color: _isSelected ? Colors.white : Colors.blue,
            fontSize: 16,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

实现Tabs

然后，我们需要创建一个带有Tabs的组件。

在lib目录下创建一个新的tabs_page.dart文件，然后添加以下代码：

import 'package:flutter/material.dart';

class TabsPage extends StatefulWidget {
  @override
  _TabsPageState createState() => _TabsPageState();
}

class _TabsPageState extends State<TabsPage> with SingleTickerProviderStateMixin {
  TabController _tabController;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tabs'),
      ),
      body: Column(
        children: <Widget>[
          TabBar(
            controller: _tabController,
            indicatorColor: Colors.blue,
            labelColor: Colors.blue,
            unselectedLabelColor: Colors.grey,
            tabs: <Widget>[
              Tab(text: 'Tab 1'),
              Tab(text: 'Tab 2'),
              Tab(text: 'Tab 3'),
            ],
          ),
          Expanded(
            child: TabBarView(
              controller: _tabController,
              children: <Widget>[
                Center(child: Text('Content 1')),
                Center(child: Text('Content 2')),
                Center(child: Text('Content 3')),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

实现顶部按钮 + Tabs联动切换

最后，我们需要在主页上组合顶部按钮和Tabs组件，在lib目录下的main.dart文件中添加以下代码：

import 'package:flutter/material.dart';
import 'top_button.dart';
import 'tabs_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Top Button Tabs',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Top Button Tabs'),
      ),
      body: Column(
        children: <Widget>[
          SizedBox(height: 20),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              TopButton(title: 'Button 1'),
              TopButton(title: 'Button 2'),
              TopButton(title: 'Button 3'),
            ],
          ),
          SizedBox(height: 20),
          Expanded(
            child: TabsPage(),
          ),
        ],
      ),
    );
  }
}

运行应用

运行以下命令启动应用：

flutter run

现在你应该看到了一个带有顶部按钮和Tabs的应用程序。点击顶部按钮后，Tabs会实现联动切换。

结论

本文示范了如何使用Flutter实现顶部按钮 + Tabs联动切换的功能。通过创建一个顶部按钮组件和Tabs组件，并将它们组合在一起，我们可以实现一个具有联动切换功能的应用程序。这种方式可以提高用户体验，并使应用程序更加易于使用。

参考：Flutter官方文档