如何用Flutter(Dart)实现用户名标题及农户经营管理功能

以下是可直接复用的标题栏实现代码，适配常见的页面头部展示需求：

import 'package:flutter/material.dart';

class ProfileHeader extends StatelessWidget {
  final String username;
  final String companyName;

  const ProfileHeader({super.key, required this.username, required this.companyName});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      decoration: BoxDecoration(
        color: Colors.grey[50],
        border: Border(bottom: BorderSide(color: Colors.grey[200]!)),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            username,
            style: const TextStyle(fontSize: 22, fontWeight: FontWeight.w600),
          ),
          const SizedBox(height: 4),
          Text(
            companyName,
            style: TextStyle(fontSize: 14, color: Colors.grey[600]),
          ),
        ],
      ),
    );
  }
}

// 调用示例
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('农户管理平台')),
      body: Column(
        children: const [
          ProfileHeader(username: '李建国', companyName: '绿源养殖专业合作社'),
          // 后续功能模块区域
        ],
      ),
    );
  }
}

如果之前实现失败，大概率是布局嵌套错误或未正确传递数据，上述代码通过独立组件封装，可直接传入用户名和公司名称完成展示。

核心功能模块拆解与实现思路 #

1. 用户资料&公司名称展示 #

• 基于上述ProfileHeader组件，结合本地存储（如Hive）保存用户信息，App启动时自动读取并填充数据。
• 可添加编辑入口，用TextField实现信息修改，修改后同步更新本地存储。

2. 盈亏计算器 #

实现实时计算逻辑，支持输入多维度成本与收益：

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

  @override
  State<ProfitCalculator> createState() => _ProfitCalculatorState();
}

class _ProfitCalculatorState extends State<ProfitCalculator> {
  final _feedCostCtrl = TextEditingController();
  final _laborCostCtrl = TextEditingController();
  final _revenueCtrl = TextEditingController();
  double _profitResult = 0;

  void _calculate() {
    final feed = double.tryParse(_feedCostCtrl.text) ?? 0;
    final labor = double.tryParse(_laborCostCtrl.text) ?? 0;
    final revenue = double.tryParse(_revenueCtrl.text) ?? 0;
    setState(() => _profitResult = revenue - (feed + labor));
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        children: [
          TextField(
            controller: _feedCostCtrl,
            keyboardType: TextInputType.number,
            decoration: const InputDecoration(labelText: '饲料总支出'),
            onChanged: (_) => _calculate(),
          ),
          TextField(
            controller: _laborCostCtrl,
            keyboardType: TextInputType.number,
            decoration: const InputDecoration(labelText: '人工成本'),
            onChanged: (_) => _calculate(),
          ),
          TextField(
            controller: _revenueCtrl,
            keyboardType: TextInputType.number,
            decoration: const InputDecoration(labelText: '总售卖收益'),
            onChanged: (_) => _calculate(),
          ),
          const SizedBox(height: 20),
          Text(
            _profitResult >= 0 
              ? "盈利：${_profitResult.toStringAsFixed(2)}元" 
              : "亏损：${(-_profitResult).toStringAsFixed(2)}元",
            style: TextStyle(
              fontSize: 18,
              color: _profitResult >= 0 ? Colors.green : Colors.red,
              fontWeight: FontWeight.w500,
            ),
          ),
        ],
      ),
    );
  }
}

3. 饲料支出/交易记录存储 #

使用Hive实现本地数据持久化，步骤如下：

1. 添加依赖到pubspec.yaml：

dependencies:
  hive: ^2.2.3
  hive_flutter: ^1.1.0

2. 初始化Hive：

void main() async {
  await Hive.initFlutter();
  await Hive.openBox('farm_records');
  runApp(const MyApp());
}

3. 封装数据操作方法：

// 添加饲料支出记录
void addFeedExpense(double amount, DateTime date, String supplier) {
  final box = Hive.box('farm_records');
  box.add({
    'type': 'feed',
    'amount': amount,
    'date': date.toIso8601String(),
    'supplier': supplier
  });
}

// 添加交易记录
void addTransaction(String customer, double amount, DateTime date) {
  final box = Hive.box('farm_records');
  box.add({
    'type': 'transaction',
    'customer': customer,
    'amount': amount,
    'date': date.toIso8601String()
  });
}

// 获取指定类型的记录
List<Map<String, dynamic>> getRecords(String type) {
  final box = Hive.box('farm_records');
  return box.values
      .cast<Map<String, dynamic>>()
      .where((item) => item['type'] == type)
      .toList();
}

4. 每日售卖收益统计 #

用DataTable展示按日期分组的收益数据，结合日期筛选功能：

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

  @override
  Widget build(BuildContext context) {
    final transactions = getRecords('transaction');
    // 按日期分组统计逻辑
    Map<String, double> dailyRevenue = {};
    for (var item in transactions) {
      final date = DateTime.parse(item['date']).toString().split(' ')[0];
      dailyRevenue[date] = (dailyRevenue[date] ?? 0) + item['amount'];
    }

    return Padding(
      padding: const EdgeInsets.all(16),
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: DataTable(
          columns: const [
            DataColumn(label: Text('日期')),
            DataColumn(label: Text('当日收益')),
          ],
          rows: dailyRevenue.entries
              .map((entry) => DataRow(cells: [
                    DataCell(Text(entry.key)),
                    DataCell(Text('${entry.value.toStringAsFixed(2)}元')),
                  ]))
              .toList(),
        ),
      ),
    );
  }
}

页面路由与导航 #

用BottomNavigationBar实现功能模块快速切换：

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

  @override
  State<MainNavigator> createState() => _MainNavigatorState();
}

class _MainNavigatorState extends State<MainNavigator> {
  int _selectedTab = 0;
  final List<Widget> _pages = const [
    HomePage(),
    ProfitCalculator(),
    FeedExpensePage(),
    DailyRevenuePage(),
    TransactionRecordPage(),
  ];

  void _switchTab(int index) => setState(() => _selectedTab = index);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_selectedTab],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedTab,
        onTap: _switchTab,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.calculate), label: '盈亏计算'),
          BottomNavigationBarItem(icon: Icon(Icons.shopping_bag), label: '饲料支出'),
          BottomNavigationBarItem(icon: Icon(Icons.bar_chart), label: '收益统计'),
          BottomNavigationBarItem(icon: Icon(Icons.list_alt), label: '交易记录'),
        ],
      ),
    );
  }
}

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