Android Studio 如何实现像线性加载条这样的功能,当用户在不同屏幕之间移动时,该功能将加载

1rhkuytd  于 2022-11-16  发布在  Android
关注(0)|答案(2)|浏览(113)

我正在使用android studio和flutter。我想建立如下图所示的屏幕:screen Image
假设我有4个屏幕。在第一个屏幕上,该栏将加载到25%。用户将通过单击继续移动到下一个屏幕,线性栏将加载到50%,以此类推。用户将通过单击应用程序栏中的后退按钮返回到前一个屏幕。

  • 我试过踏步机,但它不适合我的目的。
jjhzyzn0

jjhzyzn01#

您可以在第一个屏幕上使用小部件LinearProgressIndicator(value: 0.25,),在第二个屏幕上使用value: 0.5,依此类推。
如果要更改屏幕中的条形值,只需使用StatefullWidget的setState(),或者任何状态管理方法都可以。

e5nszbig

e5nszbig2#

import 'package:flutter/material.dart';

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

  @override
  State<ProgressPage> createState() => _ProgressPageState();
}

class _ProgressPageState extends State<ProgressPage> {
  final _pageController = PageController();

  final _pageCount = 3;

  int? _currentPage;
  double? _screenWidth;
  double? _unit;
  double? _progress;

  @override
  void initState() {
    super.initState();
    _pageController.addListener(() {
      _currentPage = _pageController.page?.round();
      setState(() {
        _progress = (_currentPage! + 1) * _unit!;
      });
    });
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _screenWidth = MediaQuery.of(context).size.width;
    _unit = _screenWidth! / _pageCount;
    _progress ??= _unit;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('HOZEROGOLD')),
      body: Column(
        children: [
          Align(
            alignment: Alignment.topLeft,
            child: Container(
              color: Colors.yellow,
              height: 10,
              width: _progress,
            ),
          ),
          Expanded(
            child: PageView(
              controller: _pageController,
              children: _createPage(),
            ),
          ),
        ],
      ),
    );
  }

  List<Widget> _createPage() {
    return List<Widget>.generate(
      _pageCount,
      (index) => Container(
        color: Colors.white,
        child: Center(
          child: ElevatedButton(
            onPressed: () => _moveNextPage(),
            child: Text('NEXT $index'),
          ),
        ),
      ),
    );
  }

  void _moveNextPage() {
    if (_pageController.page!.round() == _pageCount-1) {
      _pageController.jumpToPage(0);
    } else {
      _pageController.nextPage(
          curve: Curves.bounceIn, 
          duration: const Duration(milliseconds: 100));
    }
  }
}

快乐的编码!我希望它会有帮助。

相关问题