0

我认为这是正确的问题。为了我的演示项目，我遇到了想要保持我的代码超级简洁和简单的问题。而且我正在使用两个我希望进行通信的无状态小部件，即我希望一个小部件在用户输入时重新加载另一个小部件。

附带说明：我开始熟悉主要将 GetX 用于状态管理，因此我想尝试始终使用无状态小部件。请在您的回答中记住这一点。我知道我可以使用 setState() 有状态小部件解决这个问题。我也知道我可以通过扩展 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(...),
    );
  }
}
4

1 回答 1

1

这篇旧帖子解释说：

StatelessWidget 永远不会自行重建（但可以从外部事件中重建）。StatefulWidget 可以。这就是黄金法则。

所以你需要一些机制来导致StatelessWidget重建，正如你所说，其中有很多。

我喜欢将flutter_hooks其用作管理此类私有状态的简单机制。这是使用它的示例的代码。在代码中：

  • 父小部件调用useState以定义/访问其状态
  • 子部件调用回调来更新状态，从而导致父部件重建

编码：

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),
        ],
      ),
    );
  }
}
于 2021-05-07T12:08:14.893 回答