フラッター。RenderObject-測定して征服する

みなさん、こんにちは。私の名前はドミトリー・アンドリヤノフです。私はSurfのFlutter開発者です。メインのFlutterライブラリは、効率的で生産的なUIを構築するのに十分です。ただし、特定のケースを実装する必要があり、それからさらに深く掘り下げる必要がある場合があります。

入門

多くのテキストフィールドがある画面があります。それらの5つまたは30が存在する可能性があり、それらの間にさまざまなウィジェットが存在する可能性があります。

仕事

• キーボードの上にある[次へ]ボタンでブロックを配置して、次のフィールドに切り替えます。
• フォーカスを変更するときは、「次へ」ボタンでフィールドをブロックまでスクロールします。

問題

ボタンのあるブロックがテキストフィールドに重なっています。テキストフィールドの重なり合うスペースのサイズによる自動スクロールを実装する必要があります。

ソリューションの準備

1.20フィールドの画面を見てみましょう。



コード：

List<String> list = List.generate(20, (index) => index.toString());

@override
Widget build(BuildContext context) {
 return Scaffold(
   body: SingleChildScrollView(
     child: SafeArea(
       child: Padding(
         padding: const EdgeInsets.all(20),
         child: Column(
           children: <Widget>[
             for (String value in list)
               TextField(
                 decoration: InputDecoration(labelText: value),
               )
           ],
         ),
       ),
     ),
   ),
 );
}

テキストフィールドにフォーカスを合わせると、次の図







が表示されます。フィールドは完全に表示され、すべてが正常です。



2.ボタンでブロックを追加します。オーバーレイは







、ブロックを表示するために使用されます。これにより、スタックラッパーを使用せずに、画面上のウィジェットとは独立してプレートを表示できます。同時に、フィールドと「次へ」ブロックの間に直接の相互作用はありません。オーバーレイに関する 素晴らしい記事。 つまり、オーバーレイを使用すると、オーバーレイスタックを介して、ウィジェットを他のウィジェットの上にオーバーレイできます。OverlayEntryを使用すると、対応するオーバーレイを制御できます。 コード：

bool _isShow = false;
OverlayEntry _overlayEntry;

KeyboardListener _keyboardListener;

@override
void initState() {
 SchedulerBinding.instance.addPostFrameCallback((_) {
   _overlayEntry = OverlayEntry(builder: _buildOverlay);
   Overlay.of(context).insert(_overlayEntry);
   _keyboardListener = KeyboardListener()
     ..addListener(onChange: _keyboardHandle);
 });
 super.initState();
}

@override
void dispose() {
 _keyboardListener.dispose();
 _overlayEntry.remove();
 super.dispose();
}
Widget _buildOverlay(BuildContext context) {
 return Stack(
   children: <Widget>[
     Positioned(
       bottom: MediaQuery.of(context).viewInsets.bottom,
       left: 0,
       right: 0,
       child: AnimatedOpacity(
         duration: const Duration(milliseconds: 200),
         opacity: _isShow ? 1.0 : 0.0,
         child: NextBlock(
           onPressed: () {},
           isShow: _isShow,
         ),
       ),
     ),
   ],
 );
void _keyboardHandle(bool isVisible) {
 _isShow = isVisible;
 _overlayEntry?.markNeedsBuild();
}

3.予想どおり、ブロックはマージンとオーバーラップしています。

ソリューションのアイデア

1. ScrollControllerから画面の現在のスクロール位置を取得し、フィールドまでスクロールします。

フィールドのサイズは不明です。特に複数行の場合は、フィールドまでスクロールすると不正確な結果になります。解決策は完璧でも柔軟でもありません。



2.リストの外にウィジェットのサイズを追加し、スクロールを考慮に入れます。

ウィジェットを固定の高さに設定すると、スクロールの位置とウィジェットのサイズがわかれば、現在可視ゾーンにあるものと、特定のウィジェットを表示するためにスクロールする必要がある量がわかります。



短所：

• リスト外のすべてのウィジェットを考慮に入れて、計算で使用される固定サイズを設定する必要があります。これは、インターフェイスの必要な設計と動作に常に対応しているとは限りません。
  
  
• UIを編集すると、計算が修正されます。

3.フィールドの画面と「次へ」ブロックに対するウィジェットの位置を取得し、違いを読み取ります。



マイナス-箱から出してそのような可能性はありません。



4.レンダリングレイヤーを使用します。記事に



基づいて、Flutterはその子孫をツリーに配置する方法を知っています。つまり、この情報を引き出すことができます。RenderObjectはレンダリングを担当します。これから説明します。RenderBoxには、ウィジェットの幅と高さを示すサイズボックスがあります。これらは、ウィジェットのレンダリング時に計算されます。リスト、コンテナー、テキストフィールド（複数行のものも含む）などです。 あなたはRenderBoxを介して取得することができます

context context.findRenderObject() as RenderBox

GlobalKeyを使用して、フィールドのコンテキストを取得できます。



マイナス：



GlobalKeyは最も簡単なことではありません。そして、それをできるだけ少なく使う方が良いです。



「グローバルキーを持つウィジェットは、ツリー内のある場所から別の場所に移動するときにサブツリーを再描画します。サブツリーを再描画するには、ウィジェットが古い場所から削除されたのと同じアニメーションフレームで、ツリー内の新しい場所に到達する必要があります。



グローバルキーは、パフォーマンスの点で比較的高価です。上記の機能のいずれも必要ない場合は、Key、ValueKey、ObjectKey、またはUniqueKeyの使用を検討してください。



同じグローバルキーを持つツリーに2つのウィジェットを同時に含めることはできません。これを実行しようとすると、ランタイムエラーが発生します。」ソース。



実際、20個のGlobalKeyを画面に表示したままにしておくと、ひどいことは何も起こりませんが、必要な場合にのみ使用することをお勧めします。そのため、別の方法を探します。

GlobalKeyを使用しないソリューション

レンダーレイヤーを使用します。最初のステップは、RenderBoxから何かを引き出すことができるかどうか、そしてこれが必要なデータであるかどうかを確認することです。



仮説テストコード：

FocusNode get focus => widget.focus;
 @override
 void initState() {
   super.initState();
   Future.delayed(const Duration(seconds: 1)).then((_) {
	// (1)
     RenderBox rb = (focus.context.findRenderObject() as RenderBox);
//(3)
     RenderBox parent = _getParent(rb);
//(4)
     print('parent = ${parent.size.height}');
   });
 }
 RenderBox _getParent(RenderBox rb) {
   return rb.parent is RenderWrapper ? rb.parent : _getParent(rb.parent);
 }

Widget build(BuildContext context) {
   return Wrapper(
     child: Container(
       color: Colors.red,
       width: double.infinity,
       height: 100,
       child: Center(
         child: TextField(
           focusNode: focus,
         ),
       ),
     ),
   );
}

//(2)
class Wrapper extends SingleChildRenderObjectWidget {
 const Wrapper({
   Key key,
   Widget child,
 }) : super(key: key, child: child);
 @override
 RenderWrapper createRenderObject(BuildContext context) {
   return RenderWrapper();
 }
}
class RenderWrapper extends RenderProxyBox {
 RenderWrapper({
   RenderBox child,
 }) : super(child);
}

（1）フィールドまでスクロールする必要があるため、そのコンテキストを取得し（たとえば、FocusNodeを介して）、RenderBoxを見つけてサイズを取得する必要があります。ただし、これはテキストボックスのサイズであり、親ウィジェット（パディングなど）も必要な場合は、親フィールドを介して親RenderBoxを取得する必要があります。



（2）当社は、当社からRenderWrapperクラスを継承SingleChildRenderObjectWidgetして作成RenderProxyBoxそれのために。 RenderProxyBoxは子のすべてのプロパティをシミュレートし、ウィジェットツリーがレンダリングされるときに表示します。

Flutter自体は、SingleChildRenderObjectWidgetの継承者（

Align、AnimatedSize、SizedBox、Opacity、Padding）をよく使用します。



（3）RenderWrapperに遭遇するまで、ツリーを介して親を再帰的にトラバースします。



（4）parent.size.heightを取得します-これにより正しい高さが得られます。これは正しい方法です。



もちろん、このままにすることはできません。



しかし、再帰的アプローチには欠点もあります。

• 再帰的なツリートラバーサルは、準備ができていない祖先に遭遇しないことを保証するものではありません。彼はタイプに合わないかもしれません、そしてそれはそれだけです。どういうわけか、テスト中にRenderViewに遭遇し、すべてが落ちました。もちろん、不適切な祖先を無視することはできますが、より信頼性の高いアプローチが必要です。
• これは管理不可能であり、まだ柔軟なソリューションではありません。

RenderObjectの使用

このアプローチは、render_metricsパッケージの結果であり、アプリケーションの1つで長い間使用されてきました。



操作ロジック：



1。対象のウィジェット（Widgetクラスの子孫）をRenderMetricsObjectでラップします。ネストとターゲットウィジェットは関係ありません。

RenderMetricsObject(
 child: ...,
)

2.最初のフレームの後、そのメトリックが利用可能になります。画面に対するウィジェットのサイズまたは位置（絶対またはスクロール中）の場合、メトリックが再度要求されると、新しいデータがあります。



3. RenderManagerを使用する必要はありませんが、使用する場合は、ウィジェットのIDを渡す必要があります。

RenderMetricsObject(
 id: _text1Id,
 manager: renderManager,
 child: ...

4.コールバックを使用できます。

• onMount-RenderObjectを作成します。渡されたID（または渡されなかった場合はnull）と対応するRenderMetricsBoxインスタンスを引数として受け取ります。
• onUnMount-ツリーからの削除。

パラメータでは、関数はRenderMetricsObjectに渡されたIDを受け取ります。これらの関数は、マネージャーが不要な場合や、RenderObjectが作成されてツリーから削除された時期を知る必要がある場合に役立ちます。

RenderMetricsObject(
 id: _textBlockId,
 onMount: (id, box) {},
 onUnMount: (box) {},
 child...
)

5.メトリックを取得します。RenderMetricsBoxクラスは、localToGlobalを介してそのディメンションを取得するデータゲッターを実装します。localToGlobalは、ポイントをこのRenderBoxのローカル座標系から、画面を基準にしたグローバル座標系に論理ピクセルで変換します。







A-ウィジェットの幅。画面を基準にして座標の右端のポイントに変換されます。



B-高さは、画面を基準にした最も低い座標点に変換されます。

class RenderMetricsBox extends RenderProxyBox {
 RenderData get data {
   Size size = this.size;
   double width = size.width;
   double height = size.height;
   Offset globalOffset = localToGlobal(Offset(width, height));
   double dy = globalOffset.dy;
   double dx = globalOffset.dx;

   return RenderData(
     yTop: dy - height,
     yBottom: dy,
     yCenter: dy - height / 2,
     xLeft: dx - width,
     xRight: dx,
     xCenter: dx - width / 2,
     width: width,
     height: height,
   );
 }

 RenderMetricsBox({
   RenderBox child,
 }) : super(child);
}

6. RenderDataは、個々のx値とy値をdoubleとして提供し、座標点をCoordsMetricsとして提供する単なるデータクラスです。



7. ComparisonDiff -2つのRenderDataを減算すると、それらの差を含むComparisonDiffインスタンスが返されます。また、最初のウィジェットの下部と2番目のウィジェットの上部の間の位置の違い（diffBottomToTop）のゲッター（diffTopToBottom）も提供します。それぞれdiffLeftToRightとdiffRightToLeft。



8. RenderParametersManagerは、RenderManagerの子孫です。ウィジェットメトリックとそれらの違いを取得します。



コード：

class RenderMetricsScreen extends StatefulWidget {
 @override
 State<StatefulWidget> createState() => _RenderMetricsScreenState();
}

class _RenderMetricsScreenState extends State<RenderMetricsScreen> {
 final List<String> list = List.generate(20, (index) => index.toString());
 ///    render_metrics
 ///      
 final _renderParametersManager = RenderParametersManager();
 final ScrollController scrollController = ScrollController();
 /// id    ""
 final doneBlockId = 'doneBlockId';
 final List<FocusNode> focusNodes = [];

 bool _isShow = false;
 OverlayEntry _overlayEntry;
 KeyboardListener _keyboardListener;
 ///   FocusNode,    
 FocusNode lastFocusedNode;

 @override
 void initState() {
   SchedulerBinding.instance.addPostFrameCallback((_) {
     _overlayEntry = OverlayEntry(builder: _buildOverlay);
     Overlay.of(context).insert(_overlayEntry);
     _keyboardListener = KeyboardListener()
       ..addListener(onChange: _keyboardHandle);
   });

   FocusNode node;

   for(int i = 0; i < list.length; i++) {
     node = FocusNode(debugLabel: i.toString());
     focusNodes.add(node);
     node.addListener(_onChangeFocus(node));
   }

   super.initState();
 }

 @override
 void dispose() {
   _keyboardListener.dispose();
   _overlayEntry.remove();
   focusNodes.forEach((node) => node.dispose());
   super.dispose();
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: SingleChildScrollView(
       controller: scrollController,
       child: SafeArea(
         child: Padding(
           padding: const EdgeInsets.all(20),
           child: Column(
             children: <Widget>[
               for (int i = 0; i < list.length; i++)
                 RenderMetricsObject(
                   id: focusNodes[i],
                   manager: _renderParametersManager,
                   child: TextField(
                     focusNode: focusNodes[i],
                     decoration: InputDecoration(labelText: list[i]),
                   ),
                 ),
             ],
           ),
         ),
       ),
     ),
   );
 }

 Widget _buildOverlay(BuildContext context) {
   return Stack(
     children: <Widget>[
       Positioned(
         bottom: MediaQuery.of(context).viewInsets.bottom,
         left: 0,
         right: 0,
         child: RenderMetricsObject(
           id: doneBlockId,
           manager: _renderParametersManager,
           child: AnimatedOpacity(
             duration: const Duration(milliseconds: 200),
             opacity: _isShow ? 1.0 : 0.0,
             child: NextBlock(
               onPressed: () {},
               isShow: _isShow,
             ),
           ),
         ),
       ),
     ],
   );
 }

 VoidCallback _onChangeFocus(FocusNode node) => () {
   if (!node.hasFocus) return;
   lastFocusedNode = node;
   _doScrollIfNeeded();
 };

 /// ,      
 /// .
 void _doScrollIfNeeded() async {
   if (lastFocusedNode == null) return;
   double scrollOffset;

   try {
     ///    id,  data    null
     scrollOffset = await _calculateScrollOffset();
   } catch (e) {
     return;
   }

   _doScroll(scrollOffset);
 }

 ///   
 void _doScroll(double scrollOffset) {
   double offset = scrollController.offset + scrollOffset;
   if (offset < 0) offset = 0;
   scrollController.position.animateTo(
     offset,
     duration: const Duration(milliseconds: 200),
     curve: Curves.linear,
   );
 }

 ///     .
 ///
 ///         ""  
 ///  (/).
 Future<double> _calculateScrollOffset() async {
   await Future.delayed(const Duration(milliseconds: 300));

   ComparisonDiff diff = _renderParametersManager.getDiffById(
     lastFocusedNode,
     doneBlockId,
   );

   lastFocusedNode = null;

   if (diff == null || diff.firstData == null || diff.secondData == null) {
     return 0.0;
   }
   return diff.diffBottomToTop;
 }

 void _keyboardHandle(bool isVisible) {
   _isShow = isVisible;
   _overlayEntry?.markNeedsBuild();
 }
}

render_metricsを使用した結果

結果

ウィジェットレベルよりも深く掘り下げ、レンダーレイヤーでの小さな操作の助けを借りて、より複雑なUIとロジックを記述できる便利な機能を手に入れました。動的ウィジェットのサイズとその位置を知ったり、重複するウィジェットを比較したりする必要がある場合があります。そして、このライブラリは、より速く、より効率的な問題解決のためにこれらすべての機能を提供します。記事では、動作のメカニズムを説明し、問題の例と解決策を示しました。私は図書館、記事、そしてあなたのフィードバックの利益を願っています。