Flutterの3DListView

(2020年9月23日)

ListWheelScrollView

ListWheelScrollView は、 3D- <でListViewを構築するために使用されるフラッターウィジェットです。 / em> 効果。このウィジェットはListViewに似ていますが、ListWheelScrollViewはその子をスクロール可能なホイールに追加します。その結果、子供たちが車輪の中で回転しているように3D効果が得られます。

基本的な使用法
2つの必須パラメーターがあります:
children List )および itemExtent double )。リストアイテムである子はデリゲートに渡され、レイアウト中に遅延ビルドされます。 itemExtent プロパティは、主軸の各アイテムのサイズを設定するために使用されます。

ListWheelScrollView(
itemExtent: 50,
children: List.generate(1000, (index) => index)
.map(
(text) => Container(
margin: EdgeInsets.only(left: 20, right: 20),
color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
child: Center(child: Text(text.toString())),
),
)
.toList(),
),

diameterRatio

これは、主軸レンダリングウィンドウのサイズに対する円柱の直径の比率です。デフォルト値は

です。垂直の場合、主軸レンダリングウィンドウのサイズはListWheelScrollViewの高さです。直径比が小さいほど、円柱は丸くなります。

diameterRatio: 1

offAxisFraction

ホイールの中心からの水平方向のずれの程度を示します。

offAxisFraction: -1.5

このプロパティの効果を見てみましょう

拡大鏡

useMagnifier : 中央の倍率(現在選択されている)
magnification: ズームインサイズ(ズームイン値)を設定

useMagnifier magnification を使用して、虫眼鏡効果を実現します。

useMagnifier: true,
magnification: 1.5,
Result of useMagnifier および倍率

onSelectedItemChanged

選択されたアイテムは、現在ホイールの中央にあるアイテムです。ユーザーが上下にスクロールするたびに変更されます。選択したアイテムのインデックスを取得するには、コールバック関数をonSelectedItemChangedプロパティとして渡すことができます。整数パラメータを受け入れるタイプです。

useDelegate

.useDelegate()という名前のコンストラクターを使用して、ListWheelScrollViewを作成する別の方法があります。 childrenを渡すには、子を作成するためにListWheelChildDelegateを渡す必要があります。

その他のプロパティについては、ListWheelScrollView こちらの公式ドキュメントをご覧ください。

この記事が役に立ったら、拍手してください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です