Placeholder 占位组件

1. Placeholder

  const Placeholder({
    Key? key,
    this.color = const Color(0xFF455A64), // Blue Grey 700
    this.strokeWidth = 2.0,
    this.fallbackWidth = 400.0,
    this.fallbackHeight = 400.0,
  }) 

2. 实例

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("MSPlaceholderRoute")),
      body: Column(
        children: [
          SizedBox(
            height: 128,
            child: Placeholder(),
          ),
          UnconstrainedBox(
            child: Placeholder(
              color: Colors.red,
              strokeWidth: 2.0,
              fallbackWidth: 200, // 当占位符处于无界情况时使用的宽度
              fallbackHeight: 200, // 当占位符处于无界情况时使用的高度
            ),
          ),
          // 占位图
          FadeInImage(
            placeholder: AssetImage("assets/images/4.jpeg"),
            image: NetworkImage(
                "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
          ),
        ],
      ),
    );
  }
}

image.png