如何在 Flutter 中实现进度指示器

Question

我正在尝试在 Flutter 中实现Progress Indicator ，但我不确定是否需要在项目仍在加载时放入 if 条件以显示Progress Indicator 。

class HomePageNewArrival extends StatefulWidget {
  final List<Product> productList;

  HomePageNewArrival({this.productList});

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

class _HomePageNewArrivalState extends State<HomePageNewArrival> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 550,
      child: GridView.builder(
          physics: NeverScrollableScrollPhysics(),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            childAspectRatio: 2 / 3.2,
            crossAxisSpacing: 1,
            mainAxisSpacing: 1,
          ),
          itemCount: this.widget.productList.length,
          itemBuilder: (context, index) {
            if (index.) {
              return HomenewArrivalProducts(this.widget.productList[index]);
            } else {
              return new CircularProgressIndicator();
            }
          }),
    );
  }
}

Answer 1

在 flutter 中构建小部件是即时的我认为你想要做的是在加载图像时显示一个圆形微调器HomenewArrivalProducts()如果你有一个Image.network() ) 小部件试试这个：

child: Image.network(
      'https://example.com/image.jpg',
      loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) {
        if (loadingProgress == null)
          return child;
        return Center(
          child: CircularProgressIndicator(
            value: loadingProgress.expectedTotalBytes != null
                ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes
                : null,
          ),
        );
      },
    ),

如果你只想制造某种正在加载的错觉，你可以使用FutureBuilder()

FutureBuilder(
      future: Future.delayed(Duration(milliseconds: 500)),
      builder: (ctx, snapshot) =>
          snapshot.connectionState == ConnectionState.waiting
              ? CircularProgressIndicator()
              : GridView.builder(...),
    );