当前位置：首页 > article >正文

【FlutterDart】页面切换 PageView PageController（9 /100）

article 2025/1/7 22:58:52

上效果：

在这里插入图片描述
有些不能理解官方例子里的动画为什么没有效果，有可能是我写法不对
后续如果有动画效果修复了，再更新这篇，没有动画效果，总觉得感受的丝滑效果差了很多

上代码：

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:logging/logging.dart';

const TAG = 'OfficePageViewDemo';

class OfficePageViewDemo extends StatelessWidget {
  const OfficePageViewDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('PageView Demo!'),
        ),
        body: PageViewDemo(),
      ),
    );
  }
}

class PageViewDemo extends StatefulWidget {
  const PageViewDemo({super.key});

  @override
  createState() => _PageViewDemoState();
}

class _PageViewDemoState extends State<PageViewDemo>
    with TickerProviderStateMixin {
  late PageController _pageViewController;
  late TabController _tabController;
  int _currentPageIndex = 0;

  @override
  void initState() {
    super.initState();
    _pageViewController = PageController();
    _tabController = TabController(length: 3, vsync: this);
  }

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

  @override
  Widget build(BuildContext context) {
    final TextTheme textTheme = Theme.of(context).textTheme;

    return Stack(
      alignment: Alignment.bottomCenter,
      children: [
        PageView(
          controller: _pageViewController,
          onPageChanged: _handlePageViewChanged,
          children: [
            Center(
              child: Text(
                'First Page',
                style: textTheme.titleLarge,
              ),
            ),
            Center(
              child: Text(
                'Second Page',
                style: textTheme.titleLarge,
              ),
            ),
            Center(
              child: Text(
                'Third Page',
                style: textTheme.titleLarge,
              ),
            ),
          ],
        ),
        PageIndicator(
          tabController: _tabController,
          currentPageIndex: _currentPageIndex,
          onUpdateCurrentPageIndex: _updateCurrentPageIndex,
          isOnDesktopAndWeb: _isOnDesktopAndWeb,
        )
      ],
    );
  }

  void _handlePageViewChanged(int currentPageIndex) {
    Logger(TAG).info(
        '_handlePageViewChanged called! currentPageIndex=$currentPageIndex');

    if (!_isOnDesktopAndWeb) {
      return;
    }
    _tabController.index = currentPageIndex;
    setState(() {
      _currentPageIndex = currentPageIndex;
    });
  }

  void _updateCurrentPageIndex(int index) {
    Logger(TAG).info('_updateCurrentPageIndex called! index=$index');

    _tabController.index = index;
    _pageViewController.animateToPage(index,
        duration: const Duration(microseconds: 400 * 2), curve: Curves.linear);
  }

  bool get _isOnDesktopAndWeb {
    if (kIsWeb) {
      return true;
    }
    switch (defaultTargetPlatform) {
      case TargetPlatform.macOS:
      case TargetPlatform.linux:
      case TargetPlatform.windows:
        return true;
      case TargetPlatform.android:
      case TargetPlatform.iOS:
      case TargetPlatform.fuchsia:
        return false;
    }
  }
}

class PageIndicator extends StatelessWidget {
  const PageIndicator(
      {super.key,
      required this.tabController,
      required this.currentPageIndex,
      required this.onUpdateCurrentPageIndex,
      required this.isOnDesktopAndWeb});

  final int currentPageIndex;
  final TabController tabController;
  final void Function(int) onUpdateCurrentPageIndex;
  final bool isOnDesktopAndWeb;

  @override
  Widget build(BuildContext context) {
    if (!isOnDesktopAndWeb) {
      return const SizedBox();
    }
    final ColorScheme colorScheme = Theme.of(context).colorScheme;

    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          IconButton(
              splashRadius: 16.0,
              padding: EdgeInsets.zero,
              onPressed: () => {
                    if (currentPageIndex == 0)
                      {}
                    else
                      {onUpdateCurrentPageIndex(currentPageIndex - 1)}
                  },
              icon: const Icon(
                Icons.arrow_left_rounded,
                size: 32.0,
              )),
          TabPageSelector(
            controller: tabController,
            color: colorScheme.surface,
            selectedColor: colorScheme.primary,
          ),
          IconButton(
              splashRadius: 16.0,
              padding: EdgeInsets.zero,
              onPressed: () => {
                    if (currentPageIndex == 2)
                      {}
                    else
                      {onUpdateCurrentPageIndex(currentPageIndex + 1)}
                  },
              icon: const Icon(
                Icons.arrow_right_rounded,
                size: 32.0,
              )),
        ],
      ),
    );
  }
}