如何在颤振中将时钟时间更新为UTC时间

Question

我使用了一个叫做analog clock - link的flutter包来创建一个时钟。我不想用Datetime。现在，但想使用UTC时间+3。我已经调整了几次UTC代码，但仍然不知道如何使它与这个包一起工作。这个包似乎有一个bug。在我的代码中，我将日期时间更改为

.toUtc

• DateTime.now()()。add(Duration(hours: 3))，显示UTC +3。然而，每当我运行这个应用程序时，时钟一直显示当前的白天时间。我试过调整代码，但不能修复

这是我的代码，我调用模拟时钟包

class TimeAndWeatherPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
var size = MediaQuery.of(context)
.size; //this gonna give us total height and with of our device
return Scaffold(
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
body: Stack(
children: <Widget>[
Container(
// Here the height of the container is 45% of our total height
height: size.height * .50,
decoration: BoxDecoration(
color: Theme.of(context).canvasColor,
),
),
SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(0, 50, 0, 10),
child: Center(
child: TitleText(
text: "time",
)),
),
CurrentDate(),
Center(
child: AnalogClock(
decoration: BoxDecoration(
border: Border.all(
color: Theme.of(context).shadowColor, width: 0.5),
color: Theme.of(context).cardColor,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
offset: Offset(0.0, 10.0),
blurRadius: 2.0,
spreadRadius: 0.0,
color: Theme.of(context).shadowColor,
),
],
),
width: 270.0,
height: 400,
isLive: true,
showTicks: true,
showAllNumbers: true,
showDigitalClock: true,
showNumbers: true,
showSecondHand: true,
hourHandColor: Theme.of(context).iconTheme.color,
minuteHandColor: Theme.of(context).iconTheme.color,
secondHandColor: Color(0xB35FD245),
numberColor: Theme.of(context).iconTheme.color,
textScaleFactor: 1.2,
digitalClockColor: Theme.of(context).iconTheme.color,
datetime:
DateTime.now().toUtc().add(Duration(hours: 3)),
),
),
],
),
),
)
],
),
);
}
}

这里是包的原始代码

class AnalogClock extends StatefulWidget {
final DateTime datetime;
final bool showDigitalClock;
final bool showTicks;
final bool showNumbers;
final bool showAllNumbers;
final bool showSecondHand;
final Color hourHandColor;
final Color minuteHandColor;
final Color secondHandColor;
final Color tickColor;
final Color digitalClockColor;
final Color numberColor;
final bool isLive;
final double textScaleFactor;
final double width;
final double height;
final BoxDecoration decoration;
const AnalogClock(
{this.datetime,
this.showDigitalClock = true,
this.showTicks = true,
this.showNumbers = true,
this.showSecondHand = true,
this.showAllNumbers = false,
this.hourHandColor = Colors.black,
this.minuteHandColor = Colors.black,
this.secondHandColor = Colors.redAccent,
this.tickColor = Colors.grey,
this.digitalClockColor = Colors.black,
this.numberColor = Colors.black,
this.textScaleFactor = 1.0,
this.width = double.infinity,
this.height = double.infinity,
this.decoration = const BoxDecoration(),
isLive,
Key key})
: this.isLive = isLive ?? (datetime == null),
super(key: key);
const AnalogClock.dark(
{datetime,
showDigitalClock = true,
showTicks = true,
showNumbers = true,
showAllNumbers = false,
showSecondHand = true,
width = double.infinity,
height = double.infinity,
decoration = const BoxDecoration(),
Key key})
: this(
datetime: datetime,
showDigitalClock: showDigitalClock,
showTicks: showTicks,
showNumbers: showNumbers,
showAllNumbers: showAllNumbers,
showSecondHand: showSecondHand,
width: width,
height: height,
hourHandColor: Colors.white,
minuteHandColor: Colors.white,
secondHandColor: Colors.redAccent,
tickColor: Colors.grey,
digitalClockColor: Colors.white,
numberColor: Colors.white,
decoration: decoration,
key: key);
@override
_AnalogClockState createState() => _AnalogClockState(datetime);
}
class _AnalogClockState extends State<AnalogClock> {
DateTime datetime;
_AnalogClockState(datetime) : this.datetime = datetime ?? DateTime.now();
initState() {
super.initState();
if (widget.isLive) {
// update clock every second or minute based on second hand's visibility.
Duration updateDuration =
widget.showSecondHand ? Duration(seconds: 1) : Duration(minutes: 1);
Timer.periodic(updateDuration, update);
}
}
update(Timer timer) {
if (mounted) {
// update is only called on live clocks. So, it's safe to update datetime.
datetime = DateTime.now();
setState(() {});
}
}
@override
Widget build(BuildContext context) {
return Container(
width: widget.width,
height: widget.height,
decoration: widget.decoration,
child: Center(
child: AspectRatio(
aspectRatio: 1.0,
child: new Container(
constraints: BoxConstraints(minWidth: 48.0, minHeight: 48.0),
width: double.infinity,
child: new CustomPaint(
painter: new AnalogClockPainter(
datetime: datetime,
showDigitalClock: widget.showDigitalClock,
showTicks: widget.showTicks,
showNumbers: widget.showNumbers,
showAllNumbers: widget.showAllNumbers,
showSecondHand: widget.showSecondHand,
hourHandColor: widget.hourHandColor,
minuteHandColor: widget.minuteHandColor,
secondHandColor: widget.secondHandColor,
tickColor: widget.tickColor,
digitalClockColor: widget.digitalClockColor,
textScaleFactor: widget.textScaleFactor,
numberColor: widget.numberColor),
)))),
);
}
}

Answer 1

看起来你可能在这里做了一些事情。

1. 您应该在setState调用中更新datetime属性:

update(Timer timer) {
if (!mounted) return;
setState(() => datetime = DateTime.now());
}

2. 您正在更新时间而没有再次设置时区，这将使其恢复为您的本地时间。所以上面应该是这样的:

update(Timer timer) {
if (!mounted) return;
setState(() => datetime = DateTime.now().toUtc());
// Or to an arbitrary time in the future, if that's what you need:
// setState(() => datetime = DateTime.now().toUtc().add(const Duration(hours: 3)));
}

除此之外…

• 您应该存储对计时器的引用，以便您可以在小部件的dispose()方法中cancel()它。
• 注意，您只是在更新"模式"。小部件的initState方法中的时钟(秒或分钟)，该方法在小部件的生命周期中只被调用一次。当小部件更新时，它不会再次被调用。为此，您需要使用didUpdateWidget。

或…

我强烈建议您检查Riverpod包，因为它使状态管理更容易。例如，上面的代码看起来像这样…

final clockProvider = StateProvider<DateTime>((ref) => DateTime.now().toUtc());
class CustomClock extends ConsumerWidget{
...
@override
Widget build(BuildContext context, WidgetRef ref) {
return AnalogClock(
...
datetime: ref.watch(clockProvder),
...
);
}
}

class ClockModeButton extends ConsumerWidget{
...
@override
Widget build(BuildContext context, WidgetRef ref) {
return TextButton(
...
onPressed: () {
final DateTime newDateTime = DateTime.now().toUtc().add(const Duration(hours: 3));
ref.read(clockPrivder.notifier).state = newDateTime;
},
...
);
}
}