Flutter24.listView_3d

最新推荐文章于 2024-03-18 09:12:00 发布

augfun

最新推荐文章于 2024-03-18 09:12:00 发布

阅读量175

点赞数

分类专栏： Flutter

本文链接：https://blog.csdn.net/augfun/article/details/106991211

版权

Flutter 专栏收录该内容

56 篇文章 1 订阅

订阅专栏

import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home: HomePage(),
));

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

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  var images = [
    'assets/images/bg1.png',
    'assets/images/bg1.png',
    'assets/images/bg1.png',
    'assets/images/bg1.png',
    'assets/images/bg1.png',
    'assets/images/bg1.png',
    'assets/images/bg1.png',
    'assets/images/bg1.png',
    'assets/images/bg1.png',
    'assets/images/bg1.png',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
          child: ListWheelScrollView(//3d的效果
            perspective: 0.003,
            diameterRatio: 2.0,
            itemExtent: MediaQuery.of(context).size.height*0.6,
            children: images
                .map((m) => Card(
              clipBehavior: Clip.antiAlias,
              shape: RoundedRectangleBorder(//圆弧
                  borderRadius: BorderRadius.circular(20.0)),
              child: Stack(//stack有2个内容一个是图片，一个是文本
                fit: StackFit.expand,
                alignment: Alignment.center,
                children: <Widget>[
                  Image.asset(
                    m,
                    fit: BoxFit.cover,
                  ),
                  Positioned(//文本的位置
                    bottom: 30.0,
                    left: 30.0,
                    child: Text(
                      'scenery',
                      style: TextStyle(
                          color: Colors.red, fontSize: 30.0),
                    ),
                  )
                ],
              ),
            ))
                .toList(),
          ),
        ));
  }
}

输出：