ww-sample/bloc_example/lib/screens/messages_page.dart

import 'package:flutter/material.dart';

class MessagesPage extends StatefulWidget {
  @override
  State<MessagesPage> createState() => _MessagesPageState();
}

class _MessagesPageState extends State<MessagesPage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  final List<String> tabs = ['全部', '客服', '待付尾款', '待付回款', '订单完成', '订单撤销'];

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

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

  Widget _buildMessageItem({
    required String title,
    required String subtitle,
    required String leading,
    required String time,
    int? badgeCount,
  }) {
    return ListTile(
      leading: CircleAvatar(
        backgroundColor: Colors.grey.shade200,
        child: Text(leading, style: const TextStyle(color: Colors.black)),
      ),
      title: Text(title, style: const TextStyle(fontWeight: FontWeight.bold)),
      subtitle: Text(subtitle),
      trailing: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(time, style: const TextStyle(color: Colors.grey)),
          if (badgeCount != null)
            Container(
              margin: const EdgeInsets.only(top: 4),
              padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
              decoration: BoxDecoration(
                color: badgeCount > 0 ? Colors.red : Colors.grey,
                borderRadius: BorderRadius.circular(12),
              ),
              child: Text(
                badgeCount > 99 ? '99+' : '$badgeCount',
                style: const TextStyle(color: Colors.white, fontSize: 12),
              ),
            ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('消息', style: TextStyle(fontWeight: FontWeight.bold)),
        centerTitle: true,
        actions: [
          IconButton(onPressed: () {}, icon: const Icon(Icons.search)),
        ],
        bottom: TabBar(
          controller: _tabController,
          isScrollable: true,
          labelColor: Colors.blue,
          unselectedLabelColor: Colors.black,
          indicatorColor: Colors.blue,
          tabs: tabs.map((tab) => Tab(text: tab)).toList(),
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: tabs.map((_) {
          return ListView(
            children: [
              _buildMessageItem(
                leading: '系统',
                title: '[置顶]系统消息',
                subtitle: '您的订单已完成',
                time: '3月3日',
              ),
              _buildMessageItem(
                leading: '官方',
                title: '[置顶]商务客服',
                subtitle: '[客服] 欢迎来到名媛汇',
                time: '24/3/3',
                badgeCount: 6,
              ),
              _buildMessageItem(
                leading: '订单',
                title: '3/3 XXX-XXX-XXX',
                subtitle: '[待付尾款]',
                time: '02:02',
                badgeCount: 999,
              ),
              _buildMessageItem(
                leading: '订单',
                title: '3/3 XXX-XXX-XXX',
                subtitle: '[待付回款]',
                time: '周三',
                badgeCount: 99,
              ),
              _buildMessageItem(
                leading: '订单',
                title: '3/3 XXX-XXX-XXX',
                subtitle: '[订单完成]',
                time: '24/3/3',
              ),
              _buildMessageItem(
                leading: '订单',
                title: '3/3 XXX-XXX-XXX',
                subtitle: '[订单撤销]',
                time: '24/3/3',
              ),
              _buildMessageItem(
                leading: '订单',
                title: '3/3 XXX-XXX-XXX',
                subtitle: '[待付尾款]',
                time: '24/3/3',
                badgeCount: 10,
              ),
              _buildMessageItem(
                leading: '订单',
                title: '3/3 XXX-XXX-XXX',
                subtitle: '[待付回款]',
                time: '24/3/3',
              ),
              _buildMessageItem(
                leading: '订单',
                title: '3/3 XXX-XXX-XXX',
                subtitle: '[待付尾款]',
                time: '24/3/3',
                badgeCount: 9,
              ),
            ],
          );
        }).toList(),
      ),
    );
  }
}