时间戳

首页 > 解决方案 > 在颤动中从小部件调用状态类

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

问题描述

我认为我的架构有缺陷，但我很难理解如何/为什么。我对颤振很陌生，所以请多多包涵。

我有一张地图和一个抽屉。我正在抽屉中加载坐标列表，一旦按下其中一个坐标，我想在地图上做一些事情。

所以我的问题是我不知道在哪里可以调用干净的代码和工作。当然，我可以向所有人公开所有内容，但这并不能解决主要问题：我的理解

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

绘制地图：

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 课程中，我想称之为AddMarkers在我的 State 课程中。但我不能。我不确定我应该如何进行。

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

标签： viewflutterwidgetstatestateful

解决方案

正确的！

我将假设它位于 ScaffoldMapView下Drawer的不同小部件子树中。一个是drawer，另一个出现在下面的某个地方body。

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

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

AWidget <--> SState <--> MapView

最不明智的方法是引入一个全局变量（请永远不要这样做，只是提及它以便您明白这一点）。所以 ListTiles 和你的 MapView 之间的闲聊应该通过这个中介对象发生。

我们称这个对象为 SState。（Double SS 是为了区别于 Flutter 的 State 类）。该 SState 将负责跟踪地图构建的参数。（我实际上并不熟悉您的应用程序的见解，因此完全是虚构的）

因此，这种间接的动作处理将意味着：

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 对象很容易，它只是对它的函数调用/设置器调用。但是如何让 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

推荐阅读