如何通过在 flutter 中传递参数来使用使用相同功能的不同日期选择器？

Question

今天我在做一个项目，我发现在 flutter 中使用单个函数制作很多日期选择器很困难。代码如下

import 'dart:ffi';

import 'package:AllInOneCalci/customAppBar.dart';
import 'package:flutter/material.dart';

class AgeCalcUI extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var AppBarHeight = MediaQuery.of(context).size.height;
    return Scaffold(
      appBar: customAppBar(
        height: (AppBarHeight / 3) * 0.4,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 18.0),
              child: Text(
                'All In One Cali',
                style: TextStyle(
                    color: Colors.black,
                    fontSize: 35.0,
                    fontFamily: 'DancingScript',
                    fontWeight: FontWeight.bold),
              ),
            ),
          ],
        ),
      ),
      body: CustomDatePicker(),
    );
  }
}

class CustomDatePicker extends StatefulWidget {
  @override
  _CustomDatePickerState createState() => _CustomDatePickerState();
}

class _CustomDatePickerState extends State<CustomDatePicker> {
  //getting the current date
  DateTime selectedDate = DateTime.now();

  Future<void> selectDateTime(BuildContext context) async {
    final DateTime chosen = await showDatePicker(
      context: context,
      initialDate: selectedDate,
      firstDate: DateTime(1700),
      lastDate: DateTime(2030),
      initialDatePickerMode: DatePickerMode.year,
    );
    if (chosen != null && chosen != selectedDate) {
      setState(() {
         selectedDate = chosen;
       });
    } 
  }

   //widget for displaying and choosing date onTap
  Widget CustomButtonDatePicker(Color ButtonColor, Color TextColor) {
    return Column(
      children: [
        Text(
          "${selectedDate.toLocal()}".split(' ')[0],
          style: TextStyle(
            color: TextColor,
            fontSize: 30.0,
            fontFamily: 'DancingScript',
            fontWeight: FontWeight.bold,
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 18.0),
          child: MaterialButton(
            shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20.0)),
            elevation: 10.0,
            onPressed: () {
              selectDateTime(context);
            },
            color: ButtonColor,
            child: Text(
              'Select',
              style: TextStyle(
                fontSize: 15.0,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: (MediaQuery.of(context).size.height) / 2,
      alignment: Alignment.center,
      child: Column(
        children: [
          Spacer(),
          CustomButtonDatePicker(Colors.redAccent, Colors.cyan[200]),
          Spacer(),
          CustomButtonDatePicker(Colors.cyan[200], Colors.redAccent),
        ],
      ),
    );
  }
}

我想对两个日期选择器使用函数 selectDateTime()，但两个选择器的数据将相同。您能否建议我如何传递两个日期选择器的函数值，而无需为另一个选择日期编写双重代码

Answer 1

试试下面我的代码：

class AgeCalcUI extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var AppBarHeight = MediaQuery.of(context).size.height;
    return Scaffold(
      appBar: AppBar(
        title: Text("All In One Cali"),
      ),
      body: CustomDatePicker(),
    );
  }
}

enum DateSelection { first, second }

class CustomDatePicker extends StatefulWidget {
  @override
  _CustomDatePickerState createState() => _CustomDatePickerState();
}

class _CustomDatePickerState extends State<CustomDatePicker> {
  //getting the current date
  DateTime selectedDateFirst = DateTime.now();
  DateTime selectedDateSecond = DateTime.now();
  DateTime selectedDate = DateTime.now();

  Future<void> selectDateTime(
      BuildContext context, DateSelection dateSelection) async {
    final DateTime chosen = await showDatePicker(
      context: context,
      initialDate: selectedDate,
      firstDate: DateTime(1700),
      lastDate: DateTime(2030),
      initialDatePickerMode: DatePickerMode.year,
    );
    if (chosen != null && chosen != selectedDate) {
      setState(() {
        switch (dateSelection) {
          case DateSelection.first:
            selectedDateFirst = chosen;

            break;

          case DateSelection.second:
            selectedDateSecond = chosen;

            break;
        }
      });
    }
  }

  //widget for displaying and choosing date onTap
  Widget CustomButtonDatePicker(
      DateSelection dateSelection, Color ButtonColor, Color TextColor) {
    return Column(
      children: [
        Text(
          dateSelection == DateSelection.first
              ? "${selectedDateFirst.toLocal()}".split(' ')[0]
              : "${selectedDateSecond.toLocal()}".split(' ')[0],
          style: TextStyle(
            color: TextColor,
            fontSize: 30.0,
            fontFamily: 'DancingScript',
            fontWeight: FontWeight.bold,
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 18.0),
          child: MaterialButton(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20.0)),
            elevation: 10.0,
            onPressed: () {
              selectDateTime(context, dateSelection);
            },
            color: ButtonColor,
            child: Text(
              'Select',
              style: TextStyle(
                fontSize: 15.0,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: (MediaQuery.of(context).size.height) / 2,
      alignment: Alignment.center,
      child: Column(
        children: [
          Spacer(),
          CustomButtonDatePicker(
              DateSelection.first, Colors.redAccent, Colors.cyan[200]),
          Spacer(),
          CustomButtonDatePicker(
              DateSelection.second, Colors.cyan[200], Colors.redAccent),
        ],
      ),
    );
  }
}

如何通过在 flutter 中传递参数来使用使用相同功能的不同日期选择器？

How to use different datepickers using same function by passing parameters in flutter?

android

android-layout

flutter

flutter-test

flutter-layout