Flutter之3D版上下滚动List

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/I123456789T/article/details/89184255

1、这是使用flutter 实现的一个List3D版的上下滚动效果，先看一下效果吧：

实现代码如下：

import 'package:flutter/material.dart';

void main() => runApp(
    MaterialApp(
      home: HomePage(),
    )
);
//下面是本地的资源图片
var images = [
  'assets/images/mv.jpg',
  'assets/images/mv.jpg',
  'assets/images/mv.jpg',
  'assets/images/mv.jpg',
  'assets/images/mv.jpg',
];

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ListWheelScrollView(
            perspective: 0.01,
            diameterRatio: 3.0,
            itemExtent: MediaQuery.of(context).size.height*0.6,
//            children: List.generate(20, (index)=>index)
//                .map((m) => Text(    // list 有一个 点map，
//                  m.toString(),   
//                  style: TextStyle(fontSize: 30.0),
//            )).toList() 
              children: images.map((m)=> Card(
                clipBehavior: Clip.antiAlias,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20.0),
                ),
                child:Stack(
                  fit: StackFit.expand,
                  alignment: Alignment.center,
                  children: <Widget>[
                    Image.asset(
                      m,
                      fit: BoxFit.cover,
                    ),
                    Positioned(
                      bottom: 30.0,
                      left: 30.0,
                      child: Text(
                        '美景',
                        style: TextStyle(
                          color: Color(0xffff0000),
                          fontSize: 30.0,
                        ),
                      ),
                    ),
                  ],
                ) ,
              )).toList(),
        ), 
            
      ),
    );
  }
}

以上代码就能实现。