Fatal编程技术网
  • flutter/
  • Flutter 如何从flatter\u datetime\u选择器包中删除小时字段？

Flutter 如何从flatter\u datetime\u选择器包中删除小时字段？

flutter

Flutter 如何从flatter\u datetime\u选择器包中删除小时字段？,flutter,Flutter,我正在设计一个秒表类的应用程序。我已经能够以HH:MM:SS格式显示时间。但我希望它是MM:SS格式。有人能帮我这样做吗？我尝试设置showSecondsColumn:False，但秒的字段不正确。我已将代码放在下面 RaisedButton( onPressed: () { DatePicker.showTimePicker(context, showTitleActions: true,

我正在设计一个秒表类的应用程序。我已经能够以HH:MM:SS格式显示时间。但我希望它是MM:SS格式。有人能帮我这样做吗？我尝试设置showSecondsColumn:False，但秒的字段不正确。我已将代码放在下面

RaisedButton(
              onPressed: () {
                DatePicker.showTimePicker(context,
                    showTitleActions: true,
                    showSecondsColumn: true, onConfirm: (time) {
                  setState(() {
                    _selectedTime = DateFormat("HH-mm-ss").format(time);
                  });
                }, locale: LocaleType.en);
              },
              child: Text("Show Time picker"),
            ),
          ],
您可以复制粘贴运行下面的完整代码
您可以扩展
CommonPickerModel

步骤1：在
布局比例中
用
[0,1,1]隐藏小时，
0表示不显示
步骤2：将
左分隔符
和
右分隔符
更改为空格或：
步骤3：使用
DatePicker.showPicker
并传递
pickerModel:CustomPicker（currentTime:DateTime.now（））

代码片段

class CustomPicker extends CommonPickerModel {
...
 @override
  List<int> layoutProportions() {
    return [0, 1, 1];
  }

 @override
  String leftDivider() {
    return "";
  }

  @override
  String rightDivider() {
    return ":";
  }

DatePicker.showPicker(context, showTitleActions: true,
                    onChanged:  ...
                    , onConfirm: ...
                    , pickerModel: CustomPicker(currentTime: DateTime.now()),
                    locale: LocaleType.en);

类CustomPicker扩展了CommonPickerModel{
...
@凌驾
列表布局比例（）{
返回[0,1,1]；
}
@凌驾
字符串左分隔符（）{
返回“”；
}
@凌驾
字符串右分隔符（）{
返回“：”；
}
DatePicker.showPicker（上下文，showTitleActions:true，
一旦改变：。。。
，onConfirm:。。。
，pickerModel:CustomPicker（currentTime:DateTime.now（）），
locale:LocaleType.en）；
工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';
import 'package:intl/intl.dart';

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

class CustomPicker extends CommonPickerModel {
  String digits(int value, int length) {
    return '$value'.padLeft(length, "0");
  }

  CustomPicker({DateTime currentTime, LocaleType locale})
      : super(locale: locale) {
    this.currentTime = currentTime ?? DateTime.now();
    this.setLeftIndex(this.currentTime.hour);
    this.setMiddleIndex(this.currentTime.minute);
    this.setRightIndex(this.currentTime.second);
  }

  @override
  String leftStringAtIndex(int index) {
    if (index >= 0 && index < 24) {
      return this.digits(index, 2);
    } else {
      return null;
    }
  }

  @override
  String middleStringAtIndex(int index) {
    if (index >= 0 && index < 60) {
      return this.digits(index, 2);
    } else {
      return null;
    }
  }

  @override
  String rightStringAtIndex(int index) {
    if (index >= 0 && index < 60) {
      return this.digits(index, 2);
    } else {
      return null;
    }
  }

  @override
  String leftDivider() {
    return "";
  }

  @override
  String rightDivider() {
    return ":";
  }

  @override
  List<int> layoutProportions() {
    return [0, 1, 1];
  }

  @override
  DateTime finalTime() {
    return currentTime.isUtc
        ? DateTime.utc(
            currentTime.year,
            currentTime.month,
            currentTime.day,
            this.currentLeftIndex(),
            this.currentMiddleIndex(),
            this.currentRightIndex())
        : DateTime(
            currentTime.year,
            currentTime.month,
            currentTime.day,
            this.currentLeftIndex(),
            this.currentMiddleIndex(),
            this.currentRightIndex());
  }
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String _selectedTime;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Datetime Picker'),
      ),
      body: Center(
          child: Column(
        children: <Widget>[
          FlatButton(
              onPressed: () {
                DatePicker.showPicker(context, showTitleActions: true,
                    onChanged: (date) {
                  print('change $date in time zone ' +
                      date.timeZoneOffset.inHours.toString());
                }, onConfirm: (time) {
                  print('confirm $time');
                  _selectedTime = DateFormat("HH-mm-ss").format(time);
                  print(_selectedTime);
                },
                    pickerModel: CustomPicker(currentTime: DateTime.now()),
                    locale: LocaleType.en);
              },
              child: Text(
                'show custom time picker,\nyou can custom picker model like this',
                style: TextStyle(color: Colors.blue),
              )),
          RaisedButton(
            onPressed: () {
              DatePicker.showTimePicker(context,
                  showTitleActions: true,
                  showSecondsColumn: true, onConfirm: (time) {
                setState(() {
                  _selectedTime = DateFormat("HH-mm-ss").format(time);
                  print(_selectedTime);
                });
              }, locale: LocaleType.en);
            },
            child: Text("Show Time picker"),
          ),
        ],
      )),
    );
  }
}

导入“包装：颤振/材料.省道”；
导入“package:flatter_datetime_picker/flatter_datetime_picker.dart”；
导入“包：intl/intl.dart”；
void main（）=>runApp（新的MyApp（））；
类CustomPicker扩展了CommonPickerModel{
字符串数字（int值、int长度）{
返回'$value'.padLeft（长度，“0”）；
}
CustomPicker（{DateTime currentTime，LocaleType locale}）
：super（区域设置：区域设置）{
this.currentTime=currentTime？？DateTime.now（）；
this.setLeftIndex（this.currentTime.hour）；
this.setMiddleIndex（this.currentTime.minute）；
this.setRightIndex（this.currentTime.second）；
}
@凌驾
字符串leftStringAtIndex（int索引）{
如果（索引>=0&&index<24）{
返回此数字（索引，2）；
}否则{
返回null；
}
}
@凌驾
字符串中间字符串索引（整数索引）{
如果（索引>=0&&index<60）{
返回此数字（索引，2）；
}否则{
返回null；
}
}
@凌驾
字符串rightStringAtIndex（整数索引）{
如果（索引>=0&&index<60）{
返回此数字（索引，2）；
}否则{
返回null；
}
}
@凌驾
字符串左分隔符（）{
返回“”；
}
@凌驾
字符串右分隔符（）{
返回“：”；
}
@凌驾
列表布局比例（）{
返回[0,1,1]；
}
@凌驾
日期时间最终时间（）{
return currentTime.isUtc
？DateTime.utc(
currentTime.year，
currentTime.month，
currentTime.day，
此.currentLeftIndex（），
此.currentMiddleIndex（），
这是.currentRightIndex（））
：日期时间(
currentTime.year，
currentTime.month，
currentTime.day，
此.currentLeftIndex（），
此.currentMiddleIndex（），
这个.currentRightIndex（））；
}
}
类MyApp扩展了无状态小部件{
//此小部件是应用程序的根。
@凌驾
小部件构建（构建上下文）{
返回新材料PP(
标题：“颤振演示”，
主题：新主题数据(
主样本：颜色。蓝色，
),
主页：新主页（），
);
}
}
类主页扩展了StatefulWidget{
@凌驾
_HomePageState createState（）=>\u HomePageState（）；
}
类_HomePageState扩展状态{
字符串\u选择的时间；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（“日期时间选择器”），
),
正文：中(
子：列(
儿童：[
扁平按钮(
已按下：（）{
DatePicker.showPicker（上下文，showTitleActions:true，
更改日期：（日期）{
打印（'更改时区中的$日期'+
date.timeZoneOffset.inhour.toString（））；
}，onConfirm:（时间）{
打印（“确认$time”）；
_选择的时间=日期格式（“HH-mm-ss”）。格式（时间）；
打印（_选择的时间）；
},
pickerModel:CustomPicker（currentTime:DateTime.now（）），
locale:LocaleType.en）；
},
子：文本(
'显示自定义时间选择器，\n您可以像这样自定义选择器模型'，
样式：TextStyle（颜色：Colors.blue），
)),
升起的按钮(
已按下：（）{
DatePicker.showTimePicker（上下文，
showttitleactions：对，
showSecondsColumn:true，onConfirm:（时间）{
设置状态（）{
_选择的时间=日期格式（“HH-mm-ss”）。格式（时间）；
打印（_选择的时间）；
});
}，locale:LocaleType.en）；
},
子项：文本（“显示时间选择器”），
),
],
)),
);
}
}
非常感谢@chunhunghan。它正在发挥作用。我对Flatter很陌生，你真的帮助了我，让我不停下来打破了我的头。很高兴能帮忙。如果对你有帮助，请将此标记为答案。谢谢