flutter:占位视图(骨架屏、shimmer)
    		       		warning:
    		            这篇文章距离上次修改已过433天,其中的内容可能已经有所变动。
    		        
        		                
                在Flutter中,创建一个简单的占位视图(也被称为骨架屏或shimmer效果)可以使用Shimmer包。以下是一个简单的例子:
首先,在pubspec.yaml中添加依赖:
dependencies:
  flutter:
    sdk: flutter
  shimmer: ^1.0.0然后,在你的Flutter代码中使用Shimmer:
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Shimmer.fromColors(
            baseColor: Colors.red,
            highlightColor: Colors.blue,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.transparent,
            ),
          ),
        ),
      ),
    );
  }
}这段代码创建了一个简单的Shimmer效果,在一个Container中展示。Shimmer.fromColors用于设置渐变色,baseColor是底层的静态颜色,highlightColor是上层动态颜色,创建出闪烁的效果,给用户加载数据时的一种视觉反馈。
你可以根据需要调整Container的大小和形状,以及渐变色来适应不同的场景。
评论已关闭