将小部件与状态分开

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 相关的所有 functions/parameters，如 _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

感谢安德烈的回答，我通过使用得到了完整的答案：

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:

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

将小部件与状态分开

Separate the Widget from the State

dart

flutter

flutter-layout