在Flutter中的TimePicker上点击“完成”后,如何更新TextField的文本?

时间:2019-11-29 23:03:59

标签: android flutter dart

我有一个TextField,当我点击此TextField时,将显示一个TimePicker。 我设置了时间,当我点击“完成”时,TextField的文本不会更新!

我正在使用setState(),但我想我使用的是错误的...

这让我发疯,请帮助我!

谢谢。

Container
(
   height: resLayout.getScreenHeightPercentage(context, 10),
   width: resLayout.getScreenWidthPercentage(context, 35),
   padding: new EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 0.0),
   child: TextField
   (
      decoration: InputDecoration(hintText: 'hh : mm', contentPadding: const EdgeInsets.all(15.0), border: OutlineInputBorder(borderRadius: const BorderRadius.all(const Radius.circular(25.0))), filled: false),
      style: TextStyle
      (
         fontSize: 24
      ),
      controller: datacontroller,
      readOnly: true,
      onTap: ()
      {
         DatePicker.showTimePicker
         (
            context, showTitleActions: true,
            onConfirm: (time)
            {
               datacontroller.text = DateFormat("kk:mm").format(time);
               setState(() {});
            },
            currentTime: DateTime.now(),
            locale: LocaleType.it
         );
      },
   ),
)

1 个答案:

答案 0 :(得分:1)

datacontroller.text = DateFormat("kk:mm").format(time);
           setState(() {});

您需要将要更新的任何状态放在setState的括号内。这样就变成了

setState(() {
     datacontroller.text = DateFormat("kk:mm").format(time);
});

完整代码:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

//Class State here
var textInput = TextEditingController();

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: TextField(
        decoration: InputDecoration(
            hintText: 'hh : mm',
            contentPadding: const EdgeInsets.all(15.0),
            border: OutlineInputBorder(
                borderRadius:
                    const BorderRadius.all(const Radius.circular(25.0))),
            filled: false),
        style: TextStyle(fontSize: 24),
        controller: textInput,
        readOnly: true,
        onTap: () {
          DatePicker.showTimePicker(context, showTitleActions: true,
              onConfirm: (time) {
            setState(() {
              textInput.text = DateFormat("kk:mm").format(time);
            });
          }, currentTime: DateTime.now(), locale: LocaleType.it);
        },
      )),
    );
  }
}

enter image description here

enter image description here

enter image description here

完整项目回购(如果需要)。 https://github.com/kenthinson/datestateexample