Flutter占位文本行插件flutter_placeholder_textlines的使用

简介

flutter_placeholder_textlines 是一个简单的插件，用于生成模拟UI中文本的占位符行。它在加载或内容为空时显示占位符内容非常有用。

使用示例

示例代码

下面是一个完整的示例，展示了如何使用 flutter_placeholder_textlines 插件来创建不同类型的占位符文本行。

import 'package:flutter/material.dart';
import 'package:flutter_placeholder_textlines/placeholder_lines.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    String title = "flutter_placeholder_textlines Demo";
    return MaterialApp(
      title: title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: title),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Column(
                children: <Widget>[
                  _buildSubtitle("Centered"),
                  _buildSimpleTextPlaceholder(TextAlign.center),
                  _buildSubtitle("Left"),
                  _buildSimpleTextPlaceholder(TextAlign.left),
                  _buildSubtitle("Right"),
                  _buildSimpleTextPlaceholder(TextAlign.right),
                  _buildSubtitle("Change color/size"),
                  _buildCustomColorSizePlaceholder(),
                  _buildSubtitle("Animated"),
                  _buildAnimated(),
                  _buildSubtitle("Card Example"),
                  _buildCardExample(),
                  const SizedBox(
                    height: 20,
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildCustomColorSizePlaceholder() {
    return const SizedBox(
      width: 200,
      child: PlaceholderLines(
        count: 4,
        align: TextAlign.center,
        lineHeight: 8,
        color: Colors.blueAccent,
      ),
    );
  }

  Widget _buildSimpleTextPlaceholder(TextAlign align) {
    return SizedBox(
      width: 300,
      child: PlaceholderLines(
        count: 3,
        align: align,
      ),
    );
  }

  Widget _buildSubtitle(String title) {
    return Container(
      padding: const EdgeInsets.only(
        top: 24,
        bottom: 16,
      ),
      child: Text(
        title,
        style: const TextStyle(fontSize: 20),
      ),
    );
  }

  _buildAnimated() {
    return const AnimatedWrapper();
  }

  _buildCardExample() {
    return Material(
      borderRadius: BorderRadius.circular(10),
      elevation: 9,
      child: Container(
        padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 20),
        width: 300,
        child: Row(
          children: <Widget>[
            Container(
              margin: const EdgeInsets.only(right: 16),
              width: 70,
              height: 70,
              decoration: BoxDecoration(
                color: Colors.grey.withOpacity(.6),
              ),
              child: const Center(
                child: Icon(
                  Icons.photo_size_select_actual,
                  color: Colors.white,
                  size: 38,
                ),
              ),
            ),
            const Expanded(
              child: PlaceholderLines(
                count: 3,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class AnimatedWrapper extends StatefulWidget {
  const AnimatedWrapper({
    Key? key,
  }) : super(key: key);

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

class _AnimatedWrapperState extends State<AnimatedWrapper> {
  bool _animated = true;

  @override
  void initState() {
    super.initState();
    _changeState();
  }

  _changeState() {
    setState(() {
      _animated = !_animated;
    });
    Future.delayed(const Duration(seconds: 5)).then((_) => _changeState());
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 300,
      child: PlaceholderLines(
        count: 3,
        animate: _animated,
        color: Colors.purple,
      ),
    );
  }
}

API选项

以下是 PlaceholderLines 的主要API选项：

• count: 定义要生成的行数。
• color: 定义生成每行时使用的颜色。
• align: 定义所有生成行的对齐方式。
• minOpacity: 定义线条最小透明度，默认为0.4。
• maxOpacity: 定义线条最大透明度，默认为0.94。
• maxWidth: 定义线条最大宽度，默认为0.95。
• minWidth: 定义线条最小宽度，默认为0.72。
• lineHeight: 定义行高，默认为12。
• animate: 如果为true，则播放覆盖动画。
• customAnimationOverlay: 使用自定义覆盖动画。
• animationOverlayColor: 设置自定义动画覆盖颜色。
• rebuildOnStateChange: 如果为true，则每次父级组件重建状态时重新构建线条，默认为false。

截图

开始使用

要开始使用此插件，请参考官方文档和示例代码。更多详细信息可以访问 GitHub仓库。

希望这些信息能帮助你更好地理解和使用 flutter_placeholder_textlines 插件！如果你有任何问题或需要进一步的帮助，请随时提问。