dart - 将小部件与状态分开

Question

我有下面的工作正常，用于获取当前位置并显示它:

import 'package:flutter/material.dart';
import 'package:location/location.dart';
import 'package:flutter/services.dart';
import 'package:simple_permissions/simple_permissions.dart';
import 'babies.dart';

class LocationState extends State {

  String _location_text;

  Location _location = new Location();
  Map<String, double> _currentLocation;

  String error;

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

    setState(() {
      _location_text = 'Clik to update location';
    });

  }

  // Platform messages are asynchronous, so we initialize in an async method.
  _getLocation() async {
    Map<String, double> location;
    // Platform messages may fail, so we use a try/catch PlatformException.
    try {
      await SimplePermissions.requestPermission(Permission.AccessFineLocation);
      location = await _location.getLocation();
      error = null;
    } on PlatformException catch (e) {
      if (e.code == 'PERMISSION_DENIED') {
        error = 'Permission denied';
      } else if (e.code == 'PERMISSION_DENIED_NEVER_ASK') {
        error =
        'Permission denied - please ask the user to enable it from the app settings';
      }
      location = null;
    }
    print("error $error");

    setState(() {
      _currentLocation = location;
      _location_text = ('${_currentLocation["latitude"]}, ${_currentLocation["longitude"]}' ?? 'Grant location Access');
      print(_currentLocation);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Baby Name Votes')),
      body: _buildBody(context),
    );
  }

  Widget _buildBody(BuildContext context) {
    return
      Column(
        children: <Widget>[
         Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
        child: Column(
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                border: Border.all(color: Colors.grey),
                borderRadius: BorderRadius.circular(5.0),
              ),
              child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    ButtonTheme.bar(
                        child: ButtonBar(
                            children: <Widget>[
                              Text.rich(
                                TextSpan(text: '$_location_text'),
                              ),
                              FlatButton(
                                child: const Icon(Icons.my_location),
                                onPressed: () {
                                  _getLocation();
                                  var alt = _currentLocation["latitude"];
                                  print(
                                      "my $alt at location is: $_currentLocation");
                                },
                              )
                            ])
                    ),

                  ]),
            ),
        ],
      ),
    ),
            Expanded(
            child: MyCustomListViewWidget(),
           ),
        ],
      );
  }
}

我想将小部件简化为:

  Widget _buildBody(BuildContext context) {
    return
      Column(
        children: <Widget>[
           MyLocationWidget(),
           Expanded(child: MyCustomListViewWidget(),),
        ],
      );
  }

所以，我编写了如下所示的 MyLocationWidget，但是遇到了一个问题，即对于与 state 相关的所有函数/参数，都出现了 undefined name 的错误 像 _getLocation()、$_currentLocation、$_location_text:

import 'package:flutter/material.dart';
import 'location.dart';

class MyLocationWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
      child: Column(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey),
              borderRadius: BorderRadius.circular(5.0),
            ),
            child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  ButtonTheme.bar(
                      child: ButtonBar(
                          children: <Widget>[
                            Text.rich(
                              TextSpan(text: '$_location_text'),
                            ),
                            FlatButton(
                              child: const Icon(Icons.my_location),
                              onPressed: () {
                                _getLocation();
                                var alt = _currentLocation["latitude"];
                                print(
                                    "my $alt at location is: $_currentLocation");
                              },
                            )
                          ])
                  ),

                ]),
          ),
        ],
      ),
    );
  }
}

所以，我的问题是如何在自定义小部件中定义这些变量，以便它们与 state

顺利交换数据

Answer 1

发送点击回调的解决方案:

class MyLocationWidget extends StatelessWidget {
  MyLocationWidget(this.clickCallback);
  final VoidCallback clickCallback;

  //...

                        FlatButton(
                          child: const Icon(Icons.my_location),
                          onPressed: () {
                            clickCallback();
                          },

创建小部件 - MyLocationWidget(_getLocation)

但是对于 _currentLocation 来说会稍微困难一些。对于这种情况，我会使用 Stream

更新

考虑到 VoidCallback 和 TextEditingController，完整的解决方案是:

小部件:

import 'package:flutter/material.dart';

class LocationCapture extends StatelessWidget {
  LocationCapture(this.clickCallback, this.tc);
  final TextEditingController tc;
  final VoidCallback clickCallback;

  @override
  Widget build(BuildContext context) {
    return
        return Row(
  textDirection: TextDirection.rtl,  // <= This important
  children: <Widget>[
    FlatButton(
      child: const Icon(Icons.my_location),
      onPressed: () => clickCallback(),
    ),
    Expanded(child: TextField(
        controller: tc,
        enabled: false,
        textAlign: TextAlign.center,
        decoration: InputDecoration.collapsed(hintText: "")
    ))
  ],
);
  }
}

状态:

import 'package:flutter/material.dart';
import 'package:location/location.dart';
import 'package:flutter/services.dart';
import 'package:simple_permissions/simple_permissions.dart';
import 'package:baby_names/Widgets/babies.dart';
import 'package:baby_names/Widgets/location.dart';

class LocationState extends State {

  final myController = TextEditingController();
  Location _location = new Location();
  Map<String, double> _currentLocation;

  String error;

  _getLocation() async {
    Map<String, double> location;
    try {
      await SimplePermissions.requestPermission(Permission.AccessFineLocation);
      location = await _location.getLocation();
      error = null;
    } on PlatformException catch (e) {
      if (e.code == 'PERMISSION_DENIED') {
        error = 'Permission denied';
      } else if (e.code == 'PERMISSION_DENIED_NEVER_ASK') {
        error =
        'Permission denied - please ask the user to enable it from the app settings';
      }
      location = null;
    }
    print("error $error");

    setState(() {
      _currentLocation = location;
      update_controller(_currentLocation);
      print(_currentLocation);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Baby Name Votes')),
      body: _buildBody(context),
    );
  }

  Widget _buildBody(BuildContext context) {
    return
      Column(
        children: <Widget>[
          LocationCapture(_getLocation, myController),
          Expanded(
            child: BabiesVotes(),
          ),
        ],
      );
  }

  void update_controller(Map<String, double> currentLocation) {
    myController.text = ('${_currentLocation["latitude"]}, ${_currentLocation["longitude"]}' ?? 'Grant location Access');
  }
}