dart - 有没有办法设置路由的渲染顺序？

Question

基本上，我想渲染一个 ModalRoute这取决于它下面的路由中的某些小部件。

为了实现这一点，我使用了一个 GlobalKey，我将其附加到下方路径中的一个小部件:

/// in LOWER route (widget that is in lower route)
@override
Widget build(BuildContext context) {
  return Container(
    key: globalKey,
    child: ..,
  );
}

/// UPPER route (different class!)
/// called using a function on tap in the lower route widget
/// `showModalRoute(globalKey)` 
@override
Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
  final renderBox = globalKey.currentContext.findRenderObject() as RenderBox;
  final Size size = renderBox.size;
  return SizedBox(
    width: size.width,
    height: size.height,
    child: ..,
  );
}

我正在尝试使它响应方向变化。当方向改变时，下方 route 的小部件会改变大小。这里的问题是，上层路线似乎是在下层路线之前 build 的。也许情况并非如此，但是，size 始终是以前的尺寸，即我在旋转到 potrait 时获得横向尺寸，反之亦然，就好像上面的路线是在较低的路线之前 build (我的假设)。这同样适用于职位。我基本上得到了以前的 RenderBox。

有没有什么方法可以让我获得我的小部件的当前位置，即通过renderBox.localToGlobal(0, 0)？我想我可以通过在 GlobalKey 具有新大小后呈现 buildPage 来实现这一点。

Answer 1

检查这段代码，告诉我它是否按预期工作

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

void main() => runApp(MyApp());

StreamController<MyWidgetStatus> firstRouteStatus =
    StreamController.broadcast();

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Orination Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
  GlobalKey _stateKey;
  MyWidgetStatus _status;
  double height;
  double width;

  @override
  void initState() {
    WidgetsBinding.instance.addObserver(this);
    _stateKey = GlobalKey();

    SchedulerBinding.instance.addPostFrameCallback(_calculatePositionOffset);

    super.initState();
  }

  _calculatePositionOffset(_) {
    _status = _getPositions(_stateKey);

    firstRouteStatus.add(_status);
    print("position = ${_status.position}");
  }

  MyWidgetStatus _getPositions(_key) {
    final RenderBox renderBoxRed = _key.currentContext.findRenderObject();
    final position = renderBoxRed.localToGlobal(Offset.zero);
    final height = renderBoxRed.constraints.maxHeight;
    final width = renderBoxRed.constraints.maxWidth;
    return MyWidgetStatus(position: position, width: width, hight: height);
  }

  void didChangeMetrics() {
    print("Metrics changed");
    SchedulerBinding.instance.addPostFrameCallback(_calculatePositionOffset);
    super.didChangeMetrics();
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.navigate_next),
          onPressed: () {
            _settingModalBottomSheet(context);
          }),
      body: OrientationBuilder(
        builder: (context, orientation) {
          return Center(
            child: LayoutBuilder(
              builder: (context, constraints) => SizedBox(
                    key: _stateKey,
                    height: orientation == Orientation.portrait ? 100.0 : 50,
                    width: orientation == Orientation.portrait ? 50.0 : 100.0,
                    child: Container(
                      color: Colors.red,
                    ),
                  ),
            ),
          );
        },
      ),
    );
  }

  void _settingModalBottomSheet(context) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext bc) {
          return Scaffold(
            body: StreamBuilder(
              stream: firstRouteStatus.stream,
              builder: (context, AsyncSnapshot<MyWidgetStatus> snapshot) =>
                  snapshot.hasData
                      ? Container(
                          child: Text("Position = ${snapshot.data.position}"),
                        )
                      : Text("No Data"),
            ),
          );
        });
  }
}

class MyWidgetStatus {
  final Offset position;
  final double hight;
  final double width;

  MyWidgetStatus({
    this.position,
    this.hight,
    this.width,
  });
}

编辑:如果您需要在开始时呈现信息，您可以使用 BehaviorSubject 而不是像 native StreamController 一样

import 'package:rxdart/rxdart.dart';
StreamController<MyWidgetStatus> firstRouteStatus =
   BehaviorSubject();

您还必须在 pubspec.yaml 中添加 RxDart 包，在编写此行时它是 0.22.0。

rxdart: ^0.22.0