スクロールバー２重化の問題 – 開発日記(76)

2024/03/01

スクロールバーの位置を調整しようとしたが苦戦。

画面ショット内のスクロールバーのうち、縦スクロールバー（右側）は問題ない。

しかし横スクロールバー（下側）は、レーンに重なって表示されている。これだと数値の部分が見づらいので、右側と同じように、スクロールバーがレーンに重ならないようにしたい。

ところがそんな簡単そうに見える事がどうしてもうまく行かない。

スクロールバーの位置や、キャンバスを描画するのに使っているStackのPositionの問題かと思っていろいろ試したがダメだ。

そもそもFlutterでScrollbarを使うと、普通は下側のスクロールバーのようにSingleChildScrollViewの子ウィジェットに重なって表示されるものらしい。

右側のスクロールバーが子ウィジェットに重ならず表示されているのは、2つのSingleChildScrollViewをネストして使っているときの特殊な挙動のようだ。

下側を右側と同じようにしたいだけなのだが出来ない。謎すぎる。

こうなったらFlutter 3.13で追加された Two Dimensional ScrollingView を使った方が良いのだろうか。しかし今更キャッチアップして置き換えるのもきつい。（情報を探しても良いものが見つからず、予告編(?)のようなものばかりが出てくる）

あらためて考える。

今困っているのは数値とスクロールバーがかぶることだ。そこで２組使っているSingleChildScrollViewとScrollBarのセット（縦用と横用）の順番を入れ替えてみることにした。

それによって下側のスクロールバーと右側のスクロールバーの表示の仕方が入れ替わって、下側のスクロールバーはレーンに重ならないようになった。右側はレーン描画と重なってしまう。

正直本質的な解決ではないが、数字と被って見づらい問題は軽減出来た。この解決にこだわりすぎると機能追加がどんどん遅くなるので、今はいったんこれで良しとしておくことにする……。

2024/03/02

画面の様々な要素を調整。今日はテキストの描画で苦しんだ。

リレーションに説明を付ける際、縦の場合は画面のように描画している。（あああの部分）

その際に必要な描画領域のサイズを下記のような形で出している。

  Size _getTextSize(String text, TextStyle style) {
    final TextPainter textPainter = TextPainter(
        text: TextSpan(text: text, style: style), maxLines: 1, textDirection: TextDirection.ltr)
      ..layout(minWidth: 0, maxWidth: double.infinity);
    return textPainter.size;
  }

しかしこの結果(textPainter.size)が、なぜか初回の描画と二回目の描画で異なる。

デバッガで見てもこの関数に渡ってくるパラメータ(String textとTextStyle style)の中身は二回とも同じ。ではなぜ入力が同じなのに１回目と２回目の出力が異なるのか。

それなりにネットを探したりソースを追ったりしたものの分からず、色々悩んで、結局styleに初回から明示的にfontFamilyを指定したら解決につながった。しかしなかなかそれが分からなかった。

このあたりの挙動についてちゃんと時間をとって学びたい気持ちはもちろんある。ただあまり時間をかけすぎても辛いし他に優先すべきことがあるので先に進もう……。

2024/03/05

海外出張中でなかなか開発の時間が取れない。

この前のFlutter Upgrade対応で引き起こされたキー操作の不具合を少しだけ修正した。

そんななか、どうもMacのタッチパッド（トラックパッド）でスクロールしたときの挙動がぎこちないことに気づいた。先日スクロールバーの挙動を変えた（縦横のスクロールバーの重ねる順番を逆にした）変更のせいなのだろうか……。

すぐには解決出来ないのでこれも後回し。”やりたい機能追加”と、”やるべき修正”がどちらもどんどん増えていく。

※開発日記は当時の記録をもとに作成し、必要に応じて加筆・補足しています