無法讓GetX與無法直接訪問控制器的Widget一起使用

如果元素有控制器，GetX 可以正常作業并更新資料。但是，如果我們沒有以更改日期的方式直接對控制器和小部件進行操作，如何使其作業onChange。

我創建了小的復制粘貼示例：

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:web_date_picker/web_date_picker.dart';

void main() {
  Get.put(SearchFormController());
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GetX Demo',
      home: MyHomePage(),
    );
  }
}

class SearchFormController extends GetxController {
  var endDate = Rxn<DateTime?>();

  setToNow() { // This function should set widget value
    endDate.value = DateTime.now();
    print('setToNow event: ${endDate.value}');
  }
}

class MyHomePage extends StatelessWidget {
  var ctrl = Get.find<SearchFormController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Row(
        children: [
          Obx(() => SizedBox(
                width: 160,
                child: WebDatePicker(
                  initialDate: ctrl.endDate.value,
                  onChange: (value) {
                    if (value != null) {
                      ctrl.endDate.value = value;
                      print('onChange event: ${ctrl.endDate.value}');
                    }
                  },
                ),
              )),
          ElevatedButton(
            onPressed: () {
              ctrl.setToNow();
            },
            child: Text("Set Date"),
          ),
        ],
      ),

    );
  }
}

pubspec.yaml：

dependencies:
  flutter:
    sdk: flutter
  web_date_picker: ^1.0.0 3
  get: ^4.6.5  

在此代碼中，我無法通過單擊Set Date按鈕來設定日期。

我查看了小部件代碼，它的控制器通過以下實作隱藏：

class _WebDatePickerState extends State<WebDatePicker> {
  final FocusNode _focusNode = FocusNode();

  late OverlayEntry _overlayEntry;

  final LayerLink _layerLink = LayerLink();

  final _controller = TextEditingController();

  late DateTime? _selectedDate;
  late DateTime _firstDate;
  late DateTime _lastDate;

  bool _isEnterDateField = false;

  @override
  void initState() {
    super.initState();

    _selectedDate = widget.initialDate;
    _firstDate = widget.firstDate ?? DateTime(2000);
    _lastDate = widget.lastDate ?? DateTime(2100);

    if (_selectedDate != null) {
      _controller.text = _selectedDate?.parseToString(widget.dateformat) ?? '';
    }

    _focusNode.addListener(() {
      if (_focusNode.hasFocus) {
        _overlayEntry = _createOverlayEntry();
        Overlay.of(context)?.insert(_overlayEntry);
      } else {
        _controller.text = _selectedDate.parseToString(widget.dateformat);
        widget.onChange.call(_selectedDate);
        _overlayEntry.remove();
      }
    });
  }

  void onChange(DateTime? selectedDate) {
    _selectedDate = selectedDate;
    _controller.text = _selectedDate.parseToString(widget.dateformat);

    _focusNode.unfocus();
  }
...

小部件代碼https://github.com/duchdtran/web_date_picker/blob/master/lib/src/web_date_picker.dart#L98

誰能提供示例如何讓按鈕作業以設定小部件值？

uj5u.com熱心網友回復：

我遇到了類似的問題并解決了如下描述的問題。

似乎 WebDatePicker 不處理值更改。嘗試把它放在自己的StatelessWidget：

class MyWebDatePicker extends StatelessClass {
  final DateTime dt;
  var ctrl = Get.find<SearchFormController>();

  MyWebDatePicker(this.dt);

  Widget build(BuildContext context) {
    return WebDatePicker(
                  initialDate: dt,
                  onChange: (value) {
                    if (value != null) {
                      ctrl.endDate.value = value;
                      print('onChange event: ${value}');
                    }
                  },
                );
  }
}

然后，像下面給出的那樣呼叫它。這段代碼看起來不尋常，但它強制使用當前值Obx呼叫：MyWebDatePickerDateTime

Obx(() => SizedBox(
  width: 160,
  child: MyWebDatePicker(ctrl.endDate.value)
  )
)

標籤：扑 镖 颤振-getx

上一篇：Dart-從使用反射呼叫的方法中獲取結果

下一篇：如何在ListTile上進行選擇？