Flutter实现类TabView效果的水平ListView教程求助

核心实现思路 #

• 用水平ListView作为顶部标签栏，通过点击事件切换选中状态
• 下方内容区域根据当前选中的标签索引，动态展示对应内容
• 借助状态管理（如Flutter的setState）同步标签选中状态与内容展示

完整示例代码（Flutter） #

import 'package:flutter/material.dart';

void main() => runApp(const TabLikeListViewApp());

class TabLikeListViewApp extends StatelessWidget {
  const TabLikeListViewApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const TabLikePage(),
      theme: ThemeData(primarySwatch: Colors.blue),
    );
  }
}

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

  @override
  State<TabLikePage> createState() => _TabLikePageState();
}

class _TabLikePageState extends State<TabLikePage> {
  final List<String> _tabs = ['标签1', '标签2', '标签3', '标签4'];
  int _selectedIndex = 0;

  void _onTabTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  Widget _getContent() {
    switch (_selectedIndex) {
      case 0:
        return const Center(child: Text('标签1对应的内容区域'));
      case 1:
        return const Center(child: Text('标签2对应的内容区域'));
      case 2:
        return const Center(child: Text('标签3对应的内容区域'));
      case 3:
        return const Center(child: Text('标签4对应的内容区域'));
      default:
        return const SizedBox();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('水平ListView实现类TabView')),
      body: Column(
        children: [
          SizedBox(
            height: 50,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: _tabs.length,
              itemBuilder: (context, index) {
                return GestureDetector(
                  onTap: () => _onTabTapped(index),
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 20),
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: _selectedIndex == index ? Colors.blue[200] : null,
                      border: Border(
                        bottom: BorderSide(
                          color: _selectedIndex == index ? Colors.blue : Colors.transparent,
                          width: 2,
                        ),
                      ),
                    ),
                    child: Text(
                      _tabs[index],
                      style: TextStyle(
                        color: _selectedIndex == index ? Colors.blue : Colors.grey,
                        fontSize: 16,
                        fontWeight: _selectedIndex == index ? FontWeight.bold : FontWeight.normal,
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
          Expanded(child: _getContent()),
        ],
      ),
    );
  }
}

效果示例 #

内容的提问来源于stack exchange，提问作者mbrd