flutter:占位视图(骨架屏、shimmer)
在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
的大小和形状,以及渐变色来适应不同的场景。
评论已关闭