是否可以在没有状态管理器的情况下实现两个无状态小部件之间的状态管理?
Is it possible to achieve state management between two stateless widgets with no state manager?
我认为这是正确的问题。为了我的演示项目,我遇到了想要保持我的代码超级简洁和简单的问题。我正在使用两个我想进行通信的无状态小部件,也就是说,我希望一个小部件根据用户输入重新加载另一个。
附带说明:我逐渐熟悉使用 GetX 主要用于状态管理,所以我想尝试始终使用无状态小部件。请在您的回答中记住这一点。我知道我可以使用 setState() 有状态小部件来解决这个问题。我也知道我可以使用控制器 class 扩展 GetXController() 甚至提供程序来解决这个问题。但是,我只是很好奇,如果没有这些明显的解决方案,我正在尝试做的事情是否可行......
所以..问题是:
是否可以让这个小部件的 rangeStart 和 rangeEnd(当用户日期选择更改时)在下面的下一个小部件中重建文本小部件?
import 'package:flutter/material.dart';
import 'package:date_range_picker/date_range_picker.dart' as DateRangePicker;
// ignore: must_be_immutable
class DateRange extends StatelessWidget {
DateTime rangeStart = DateTime.now().subtract(Duration(days: 7));
DateTime rangeEnd = DateTime.now();
@override
Widget build(BuildContext context) {
return IconButton(
color: Colors.white,
icon: Icon(Icons.calendar_today),
onPressed: () async {
final List<DateTime> picked = await DateRangePicker.showDatePicker(
context: context,
initialFirstDate: DateTime.now().subtract(Duration(days: 7)),
initialLastDate: DateTime.now(),
firstDate: DateTime(2015),
lastDate: DateTime(DateTime.now().year + 2));
if (picked != null && picked.length == 2) {
rangeStart = picked.first;
rangeEnd = picked.last;
}
});
}
}
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:linechart/add_data_button.dart';
import 'package:linechart/date_range.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:intl/intl.dart';
class LineChartScreen extends StatelessWidget {
final DateRange dateRange = Get.put(DateRange());
@override
Widget build(BuildContext context) {
String startDate = DateFormat.yMMMMd('en_US').format(dateRange.rangeStart);
String endDate = DateFormat.yMMMMd('en_US').format(dateRange.rangeEnd);
return Scaffold(
appBar: AppBar(
title: Text('GRAPH --- Range: $startDate - $endDate'),
backgroundColor: Colors.lightBlue,
actions: [
AddDataButton(),
DateRange(),
],
),
body: Column(...),
);
}
}
此 old post 说明:
A StatelessWidget will never rebuild by itself (but can from external
events). A StatefulWidget can. That is the golden rule.
所以你需要一些机制来重建 StatelessWidget
,正如你所说,有很多这样的机制。
我喜欢使用 flutter_hooks
作为管理此类私有状态的简单机制。这是使用它的示例的代码。代码中:
- 父小部件调用
useState
到 define/access 其状态
- 子部件调用回调更新状态,导致父部件重建
代码:
import 'package:flutter/material.dart';
import 'package:date_range_picker/date_range_picker.dart' as DateRangePicker;
import 'package:intl/intl.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
// ignore: must_be_immutable
class DateRangeWidget extends StatelessWidget {
Function _setDateRange;
DateRangeWidget(this._setDateRange);
DateTime rangeStart = DateTime.now().subtract(Duration(days: 7));
DateTime rangeEnd = DateTime.now();
@override
Widget build(BuildContext context) {
return IconButton(
color: Colors.white,
icon: Icon(Icons.calendar_today),
onPressed: () async {
final List<DateTime> picked = await DateRangePicker.showDatePicker(
context: context,
initialFirstDate: DateTime.now().subtract(Duration(days: 7)),
initialLastDate: DateTime.now(),
firstDate: DateTime(2015),
lastDate: DateTime(DateTime.now().year + 2));
if (picked != null && picked.length == 2) {
rangeStart = picked.first;
rangeEnd = picked.last;
_setDateRange(rangeStart, rangeEnd);
}
});
}
}
class DateRange {
DateTime rangeStart, rangeEnd;
DateRange(this.rangeStart, this.rangeEnd);
}
class LineChartScreen extends HookWidget {
// final DateRange dateRange = Get.put(DateRange());
@override
Widget build(BuildContext context) {
final dateRange = useState(
DateRange(DateTime.now().subtract(Duration(days: 7)), DateTime.now()));
void _setDateRange(rangeStart, rangeEnd) {
dateRange.value = DateRange(rangeStart, rangeEnd);
}
String startDate =
DateFormat.yMMMMd('en_US').format(dateRange.value.rangeStart);
String endDate =
DateFormat.yMMMMd('en_US').format(dateRange.value.rangeEnd);
return Scaffold(
appBar: AppBar(
title: Text('GRAPH --- Range: $startDate - $endDate'),
backgroundColor: Colors.lightBlue,
actions: [
// AddDataButton(),
DateRangeWidget(_setDateRange),
],
),
body: Column(
children: [
Text(startDate),
Text(endDate),
],
),
);
}
}
我认为这是正确的问题。为了我的演示项目,我遇到了想要保持我的代码超级简洁和简单的问题。我正在使用两个我想进行通信的无状态小部件,也就是说,我希望一个小部件根据用户输入重新加载另一个。
附带说明:我逐渐熟悉使用 GetX 主要用于状态管理,所以我想尝试始终使用无状态小部件。请在您的回答中记住这一点。我知道我可以使用 setState() 有状态小部件来解决这个问题。我也知道我可以使用控制器 class 扩展 GetXController() 甚至提供程序来解决这个问题。但是,我只是很好奇,如果没有这些明显的解决方案,我正在尝试做的事情是否可行......
所以..问题是:
是否可以让这个小部件的 rangeStart 和 rangeEnd(当用户日期选择更改时)在下面的下一个小部件中重建文本小部件?
import 'package:flutter/material.dart';
import 'package:date_range_picker/date_range_picker.dart' as DateRangePicker;
// ignore: must_be_immutable
class DateRange extends StatelessWidget {
DateTime rangeStart = DateTime.now().subtract(Duration(days: 7));
DateTime rangeEnd = DateTime.now();
@override
Widget build(BuildContext context) {
return IconButton(
color: Colors.white,
icon: Icon(Icons.calendar_today),
onPressed: () async {
final List<DateTime> picked = await DateRangePicker.showDatePicker(
context: context,
initialFirstDate: DateTime.now().subtract(Duration(days: 7)),
initialLastDate: DateTime.now(),
firstDate: DateTime(2015),
lastDate: DateTime(DateTime.now().year + 2));
if (picked != null && picked.length == 2) {
rangeStart = picked.first;
rangeEnd = picked.last;
}
});
}
}
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:linechart/add_data_button.dart';
import 'package:linechart/date_range.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:intl/intl.dart';
class LineChartScreen extends StatelessWidget {
final DateRange dateRange = Get.put(DateRange());
@override
Widget build(BuildContext context) {
String startDate = DateFormat.yMMMMd('en_US').format(dateRange.rangeStart);
String endDate = DateFormat.yMMMMd('en_US').format(dateRange.rangeEnd);
return Scaffold(
appBar: AppBar(
title: Text('GRAPH --- Range: $startDate - $endDate'),
backgroundColor: Colors.lightBlue,
actions: [
AddDataButton(),
DateRange(),
],
),
body: Column(...),
);
}
}
此 old post 说明:
A StatelessWidget will never rebuild by itself (but can from external events). A StatefulWidget can. That is the golden rule.
所以你需要一些机制来重建 StatelessWidget
,正如你所说,有很多这样的机制。
我喜欢使用 flutter_hooks
作为管理此类私有状态的简单机制。这是使用它的示例的代码。代码中:
- 父小部件调用
useState
到 define/access 其状态 - 子部件调用回调更新状态,导致父部件重建
代码:
import 'package:flutter/material.dart';
import 'package:date_range_picker/date_range_picker.dart' as DateRangePicker;
import 'package:intl/intl.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
// ignore: must_be_immutable
class DateRangeWidget extends StatelessWidget {
Function _setDateRange;
DateRangeWidget(this._setDateRange);
DateTime rangeStart = DateTime.now().subtract(Duration(days: 7));
DateTime rangeEnd = DateTime.now();
@override
Widget build(BuildContext context) {
return IconButton(
color: Colors.white,
icon: Icon(Icons.calendar_today),
onPressed: () async {
final List<DateTime> picked = await DateRangePicker.showDatePicker(
context: context,
initialFirstDate: DateTime.now().subtract(Duration(days: 7)),
initialLastDate: DateTime.now(),
firstDate: DateTime(2015),
lastDate: DateTime(DateTime.now().year + 2));
if (picked != null && picked.length == 2) {
rangeStart = picked.first;
rangeEnd = picked.last;
_setDateRange(rangeStart, rangeEnd);
}
});
}
}
class DateRange {
DateTime rangeStart, rangeEnd;
DateRange(this.rangeStart, this.rangeEnd);
}
class LineChartScreen extends HookWidget {
// final DateRange dateRange = Get.put(DateRange());
@override
Widget build(BuildContext context) {
final dateRange = useState(
DateRange(DateTime.now().subtract(Duration(days: 7)), DateTime.now()));
void _setDateRange(rangeStart, rangeEnd) {
dateRange.value = DateRange(rangeStart, rangeEnd);
}
String startDate =
DateFormat.yMMMMd('en_US').format(dateRange.value.rangeStart);
String endDate =
DateFormat.yMMMMd('en_US').format(dateRange.value.rangeEnd);
return Scaffold(
appBar: AppBar(
title: Text('GRAPH --- Range: $startDate - $endDate'),
backgroundColor: Colors.lightBlue,
actions: [
// AddDataButton(),
DateRangeWidget(_setDateRange),
],
),
body: Column(
children: [
Text(startDate),
Text(endDate),
],
),
);
}
}