flutter 轮播图

import 'dart:async';

import 'package:flutter/material.dart';
import './pageView/pageViewSwiper.dart';
void main() {
  runApp(
    MaterialApp(
      title: 'contaniner',
      home: Scaffold(
        appBar: AppBar(
          title: const Center(child: Text('PageViewSwiper')),
        ),
        body: const MyAPP(),
      ),
    ),
  );
}

class MyAPP extends StatefulWidget {
  const MyAPP({super.key});
  @override
  State<MyAPP> createState() => _MyAPPState();
}

class _MyAPPState extends State<MyAPP>  {
  double width = double.infinity;
  double height = 200;
  List<String> list = [];
  late Timer _timer;
  @override
  void initState() {
    super.initState();
    list = [
      'https://img0.baidu.com/it/u=2462933260,1879339806&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
      'https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
      'https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000',
      'https://img1.baidu.com/it/u=2833240280,2198243692&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500',
    ];

    // _timer = Timer.periodic(const Duration(seconds: 2), (t) {
    //   nextPage();
    // });
  }

  int _selectedIndex = 0;
  final PageController _pageController = PageController(initialPage: 0,keepPage:true);
  void onClickPage(int index) {
    setState(() {
      _selectedIndex = index;
    });
    if (_pageController.hasClients) {
      _pageController.animateToPage(_selectedIndex,
          duration: const Duration(milliseconds: 500), curve: Curves.easeInOut);
//      _pageController.jumpToPage(_selectedIndex);
    }
  }
  
  void nextPage() {
    setState(() {
      if (_selectedIndex + 1 < 1000) {
        _selectedIndex++;
      } else {
        _selectedIndex = 0;
      }
      _pageController.animateToPage(_selectedIndex,
          duration: const Duration(milliseconds: 1000),
          curve: Curves.easeInOut);
    });
  }
  @override
  Widget build(BuildContext context) {
    print(_selectedIndex);
    return  Stack(
      children: [
        SizedBox(
          width: width,
          height: height,
          child: PageView.builder(
            scrollDirection: Axis.horizontal,
            onPageChanged: (index) => setState(() => _selectedIndex = index),
            controller: _pageController,
            itemCount: 1000,
            itemBuilder: (context, index) => ImagePage(src:list.elementAt(index % list.length)),
          ),
        ),
        Positioned(
          left: 0,
          bottom: 2,
          right: 0,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: list
                .asMap()
                .map(
                  (index, element) => MapEntry(
                    index,
                    Container(
                      width: 10,
                      height: 10,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        color: _selectedIndex % list.length == index
                            ? Colors.yellow
                            : Colors.green,
                        borderRadius: BorderRadius.circular(15),
                      ),
                      margin: const EdgeInsets.fromLTRB(20, 0, 20, 0),
                      child: Text(
                        "",
                        style: TextStyle(
                          color: _selectedIndex % list.length == index
                              ? Colors.red
                              : Colors.black,
                        ),
                      ),
                    ),
                  ),
                )
                .values
                .toList(),
          ),
        )
      ],
      // return Column(
      //   children: [
      // SizedBox(
      //           width: width,
      //           height: height,
      //           child: PageView.builder(
      //             onPageChanged: (index) => setState(() => _selectedIndex = index),
      //             controller: _pageController,
      //             itemCount: 4,
      //             itemBuilder: (context, index) {
      //               return list.elementAt(_selectedIndex);
      //             },
      //           ),
      //         ),
      //     ElevatedButton(onPressed: () => onClickPage(3), child: const Text("4")),
      //     ElevatedButton(onPressed: () => onClickPage(2), child: const Text("3")),
      //     ElevatedButton(onPressed: () => onClickPage(1), child: const Text("2")),
      //     ElevatedButton(onPressed: () => nextPage(), child: const Text("下一张")),
      //   ],
    );
  }
}
//pageViewSwiper.dart
import 'package:flutter/material.dart';

class ImagePage extends StatelessWidget {
  final double width;
  final double height;
  final String src;
  const ImagePage(
      {super.key,
      this.width = double.infinity,
      this.height = 200,
      required this.src});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
        width: double.infinity,
        height: 200,
        child: Image.network(
          src,
          fit: BoxFit.cover,
        ));
  }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值