如何在 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(...),
    );