3D ListView in Flutter (Português)

(23 de setembro de 2020)

ListWheelScrollView

ListWheelScrollView é um widget oscilante usado para construir ListView com 3D- efeito. Este widget é semelhante a um ListView, mas ListWheelScrollView adiciona seus filhos em uma roda de rolagem. Isso resulta em um efeito 3D como se os filhos estivessem girando em uma roda.

Uso básico
Existem dois parâmetros obrigatórios:
children ( List ) e itemExtent ( double ). Os filhos que são o item da lista são passados ​​para um delegado e construídos lentamente durante o layout. A propriedade itemExtent é usada para definir o tamanho de cada item no eixo principal.

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

É a razão entre o diâmetro do cilindro e o tamanho da janela de renderização do eixo principal, o o valor padrão é 2 , Se for vertical, o tamanho da janela de renderização do eixo principal é a altura de ListWheelScrollView. Quanto menor a proporção do diâmetro, mais arredondado é o cilindro.

diameterRatio: 1

offAxisFraction

Indica o grau de desvio horizontal da roda em relação ao centro.

offAxisFraction: -1.5

Vamos ver o efeito desta propriedade

lupa

useMagnifier : Ampliação para o centro (atualmente selecionado)
magnification: Defina o tamanho ampliado (valor de zoom)

Use useMagnifier com magnification para obter um efeito de lupa .

useMagnifier: true,
magnification: 1.5,
Result of useMagnifier e ampliação

onSelectedItemChanged

O item selecionado é aquele atualmente no centro da roda. Ele é alterado sempre que o usuário rola para cima / para baixo. Para obter o índice do item selecionado, você pode passar uma função de retorno de chamada como propriedade onSelectedItemChanged. É “do tipo, que aceita um parâmetro inteiro.

onSelectedItemChanged: (index) => {
print(index)
},

useDelegate

Há outra maneira de criar um ListWheelScrollView usando o .useDelegate() construtor nomeado. de passar children, você precisa passar um ListWheelChildDelegate para criar os filhos.

ListWheelScrollView.useDelegate(
itemExtent: 50,
childDelegate: ListWheelChildBuilderDelegate(
builder: (context, index) {
return Container(
margin: EdgeInsets.only(left: 20, right: 20),
color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
alignment: Alignment.center,
child: Text("$index"),
);
},
childCount: 1000),
),

Encontre a documentação oficial de ListWheelScrollView aqui para explorar mais propriedades.

Se você achar este artigo útil, aplauda-o.

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *