view - 在 flutter 中从小部件调用状态类

Question

我认为我的架构有缺陷，但我正在努力了解如何/为什么。我是 Flutter 的新手，所以请多多包涵。

我有一张 map 和一个抽屉。我正在抽屉中加载坐标列表，我想在按下其中一个坐标后在 map 上执行操作。

所以我的问题是我不知道该调用什么才能使干净的代码和工作。当然，我可以将所有内容都公开给所有人，但这并不能解决主要问题:我的理解

我的 map 和我的抽屉画在同一个地方，所以我已经认为我在作弊，但我认为没关系。老实说，我什至不确定那部分是否真的正确。

绘制 map :

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  var _map = MapView();
  var _stationService = StationService();

  ....

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 4,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.map)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike))
              ],
            ),
            title: Text('Floctta Plus'),
          ),
          drawer: _drawer(),
          body: TabBarView(
            physics: NeverScrollableScrollPhysics(),
            children: [
              IncrementView(),
              _map,
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike)
            ],
          ),
        ),
      ),
    );
  }

在我的抽屉代码中:

ListView.builder(
  itemCount: snapshot.data.length,
  itemBuilder: (context, position) {
    return ListTile(
       title: new Text(snapshot.data[position].titleFR),
       leading: new Icon(Icons.pin_drop),
       onTap: () {
         _map.GoToStation();     <<= Here, calling the MapView class
       },
    );
  },
),

所有的MapView.dart代码

class MapView extends StatefulWidget {
  MapView({Key key}) : super(key: key);


  void GoToStation() {
    print("I'm reaching this point with success!");
  }

  @override
  _MapViewState createState() => _MapViewState();
}

class _MapViewState extends State<MapView> {
  CameraPosition _initialPosition =
      CameraPosition(target: LatLng(50.8267018, 4.3532732), zoom: 10.0);
  Completer<GoogleMapController> _controller = Completer();

  var _markers;

  void AddMarkers(List<Station> stations) {
    setState(() {
      _markers = new List.generate(
          stations.length,
              (index) => Marker(
            markerId: MarkerId(index.toString()),
            position: new LatLng(double.parse(stations[index].latitude),
                double.parse(stations[index].longitude)),
            infoWindow: InfoWindow(
              title: stations[index].titleFR,
              snippet: stations[index].city,
            ),
            icon: BitmapDescriptor.defaultMarker,
          ));
    });
  }

  void _onMapCreated(GoogleMapController controller) {
    _controller.complete(controller);
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        GoogleMap(
          onMapCreated: _onMapCreated,
          initialCameraPosition: _initialPosition,
          markers: _markers,
          myLocationEnabled: true,
        ),
      ],
    );
    // );
  }
}

我认为有足够的代码。

我的问题是:

我现在在我的 Mapview 类中，我想调用我的 State 类中的 AddMarkers。但我不能。我不太确定我应该如何进行。

我应该直接从抽屉里调用状态类吗？如果是这样，如何？我应该从 View 类中调用状态吗？如果是这样，如何？我应该完全做其他事情吗？如果是，是什么？

Answer 1

没错!

我假设 MapView 和 Drawer 位于 Scaffold 下的不同小部件子树中。一个是 drawer，另一个出现在 body 下的某处。

我的理解是，当有人点击抽屉中的 ListTile 时，MapView 应该更新。

一般来说，在这种情况下，您要采用的原则是引入第 3 方对象以在 2 个组件之间进行调解。

AWidget <--> SState <--> MapView

最不明智的方法是引入一个全局变量(请永远不要这样做，只需提及它以便您明白)。所以 ListTiles 和您的 MapView 之间的聊天应该通过这个中介对象进行。

让我们称这个对象为 SState。 (Double SS 是为了区别于 Flutter 的 State 类)。这个 SState 将负责跟踪 map 构建的参数。 (我实际上并不熟悉您应用的洞察力，所以这完全是编造的)

因此，这种间接的操作处理意味着:

tap on ListTile in drawer -> update SState object -> let Flutter know stuff happened and should update those widgets that are sensitive to that change (MapView)

更新 SState 对象很容易，只需对其进行函数调用/setter 调用即可。但是如何让 Flutter 知道它应该更新 MapView？您应该将 SState 对象实例放在哪里，以便两者都可以在没有全局变量的情况下访问它？

要回答这个问题，有很多解决方案:scoped_model、InheritedWidget、Provider、BLoC pattern .所有这一切的共同点是它们采用了一种称为 lifting state up 的原则。基本上意味着，SState 对象 应该在它们上面的树中创建。

提供商示例:

class SState with ChangeNotifier {

  String _someMapParam;
  String get someMapParam => _someMapParam;
  set someMapParam(String val) {
    _someMapParam = val;
    if(hasListeners) notifyListeners();
  }
}

// [...] somewhere in your app

Widget build(BuildContext context) {
  return ChangeNotifierProvider<SState>(
    builder: (ctx) => new SState(),
    child: Scaffold(
      drawer: _drawer(),
      body: Consumer<SState>(
        builder: (_, sStateInstance, __) => Text(sStateInstance.someMapParam),
      ),
    ),
  );
}

有关提供商的更多详细信息:https://pub.dev/packages/provider