Flutter占位符动画插件circular_placeholder的使用

发布于 1周前 作者 eggper 来自 Flutter

Flutter占位符动画插件circular_placeholder的使用

Circular Placeholder

预览：

示例：

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: 120,
          width: 220,    
          child: CircularPlaceholder(
            color: Colors.green,
            strokeWidth: 3,
          ),
        ),
      ),
    );
  }
}

完整示例Demo

在以下完整的示例中，我们将展示如何在Flutter应用中使用CircularPlaceholder插件。该插件用于创建一个圆形占位符，并可以自定义其颜色和边框宽度。

首先，确保你已经在pubspec.yaml文件中添加了circular_placeholder依赖：

dependencies:
  circular_placeholder: ^1.0.0 # 请根据实际情况选择合适的版本

然后运行flutter pub get来安装该依赖。

接下来，在你的主文件中实现以下代码：

import 'package:flutter/material.dart';
import 'package:circular_placeholder/circular_placeholder.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 圆形占位符示例',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('圆形占位符示例'),
      ),
      body: Center(
        child: Container(
          alignment: Alignment.center,
          height: 120,
          width: 220,
          child: CircularPlaceholder(
            color: Colors.green,
            strokeWidth: 3,
          ),
        ),
      ),
    );
  }
}

更多关于Flutter占位符动画插件circular_placeholder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter占位符动画插件circular_placeholder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用circular_placeholder插件来实现占位符动画的示例代码。circular_placeholder插件可以用于在加载数据前显示一个漂亮的动画占位符，以提升用户体验。

首先，确保你的pubspec.yaml文件中已经添加了circular_placeholder依赖：

dependencies:
  flutter:
    sdk: flutter
  circular_placeholder: ^0.1.0  # 请检查最新版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的Dart文件中使用CircularPlaceholder组件。以下是一个完整的示例，展示如何在Flutter应用中集成和使用circular_placeholder：

import 'package:flutter/material.dart';
import 'package:circular_placeholder/circular_placeholder.dart';
import 'dart:async';

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  bool _isDataLoaded = false;
  List<String> _data = [];

  @override
  void initState() {
    super.initState();
    // 模拟数据加载过程
    Timer(Duration(seconds: 3), () {
      setState(() {
        _isDataLoaded = true;
        _data = List.generate(10, (index) => "Item ${index + 1}");
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Circular Placeholder Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: _isDataLoaded
            ? ListView.builder(
                itemCount: _data.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(_data[index]),
                  );
                })
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  CircularPlaceholder(
                    color: Colors.grey[300]!,
                    radius: 50.0,
                    child: Icon(
                      Icons.loading,
                      size: 40,
                      color: Colors.blue,
                    ),
                  ),
                  SizedBox(height: 16),
                  CircularPlaceholder(
                    color: Colors.grey[300]!,
                    radius: 50.0,
                    child: CircularProgressIndicator(
                      value: null, // 表示这是一个不确定的进度条
                      strokeWidth: 2.0,
                      backgroundColor: Colors.grey[500]!,
                    ),
                  ),
                ],
              ),
      ),
    );
  }
}

在这个示例中：

  1. MyApp是应用程序的根组件，它定义了一个基本的Material应用程序。
  2. MyHomePage是主页面，它包含一个状态_isDataLoaded来跟踪数据是否加载完成。
  3. initState方法中，使用Timer模拟了一个3秒的数据加载过程。加载完成后，通过setState更新状态，将_isDataLoaded设置为true，并填充数据列表_data。
  4. build方法根据_isDataLoaded的值决定显示占位符动画还是实际数据。如果数据未加载，显示两个CircularPlaceholder，一个带有图标，一个带有进度条。
  5. 一旦数据加载完成，使用ListView.builder显示数据列表。

这个示例展示了如何使用circular_placeholder插件来创建加载数据时的占位符动画，增强用户体验。你可以根据需要调整动画的样式和参数。

回到顶部