使用Flutter做多页面的一些心得

原创

已于 2023-10-27 17:55:28 修改 · 654 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

于 2023-09-21 19:21:39 首次发布

文章讲述了如何在Flutter中结合PageView和AnimationController创建一个可滑动列表，当滑动到中间元素时，实现放大和旋转动画效果。作者提供了代码示例，展示了如何使用动画控制器控制页面和元素的变换。

Flutter的组件PageView与AnimationController的结合

所需组件
- 个人需求与解决方法
- 修改一下

所需组件

1、PageView
官方介绍:https://api.flutter-io.cn/flutter/widgets/PageView-class.html
2、AnimationController
官方介绍:https://api.flutter-io.cn/flutter/animation/AnimationController-class.html

个人需求与解决方法

将个人需求导入谷歌的GPT：使用flutter做一个页面，做一个类似列表的东西，其中元素左右滑动时，滑动到中间的元素呈现放大效果与以0度开始的一直旋转的动画
得到：
代码：

import 'package:flutter/material.dart';

void main() {
   
   
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
   
   
  @override
  Widget build(BuildContext context) {
   
   
    return MaterialApp(
      title: 'List Animation',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
   
   
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
   
   
  AnimationController _animationController;
  PageController _pageController;
  int _currentPage = 0;

  @override
  void initState() {
   
   
    super.initState();
    _animationController = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    )..repeat(); // 设置旋转动画时长和循环
    _pageController = PageController(initialPage: _currentPage);
  }

  @override
  void dispose() {
   
   
    _animationController.dispose(); // 释放动画资源
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
   
   
    return Scaffold(
      appBar: AppBar(
        title: Text('List Animation'),
      ),
      body: PageView.builder(
        controller: _pageController,
        itemCount: 5,
        onPageChanged: (index) {
   
   
          setState(() {
   
   
            _currentPage = index;
          });
        },
        itemBuilder: (context