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，但是遇到了与undefined name相关的所有函数/参数（如state都出现_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，完整的解决方案将是：

widget：

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: "")
    ))
  ],
);
  }
}

State：

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');
  }
}

Answer 2

感谢安德烈（Andrey）的回答，我使用以下命令得到了完整的答案：

.square

完整代码如下：

1. VoidCallback for calling function 2. TextEditingController for changing the text content：

widget

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 Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( width: 180, child: TextField( controller: tc, enabled: false, textAlign: TextAlign.center, decoration: InputDecoration.collapsed(hintText: "") ) ), Container( child: FlatButton( child: const Icon(Icons.my_location), onPressed: () => clickCallback(), ) ), ] ); } }：

State

将小部件与州分开

2 个答案: