AppBar和ListView.length

的title:的AppBar是文本。如果 Body 有ListView，那是由 Stream 制成的。標題中的文本如何反映ListView專案的數量。

    build(BuildContext context) {
      return Scaffold(
      appBar:AppBar(title: generateTitle()) // <-- how to pass the snapshot.requiredData.length into here?
      body: StreamBuilder(
        stream: theStream();
        builder:(BuildContext context, AsyncSnapshot<List<AnObject>> snapshot) {
          return ListView.builder(
            itemCount: snapshot.requireData.length,            
            itemBuilder: (context, index) =>
              CardFromAnObject(snapshot,snapshot.requireData[index], context),
          )
        }
      )
   )
}

uj5u.com熱心網友回復：

您可以添加 addPostFrameCallback 來計算您的資料項，然后在 Appbar 中使用 totalItem。

    build(BuildContext context) {
      return Scaffold(
      appBar:AppBar(title: generateTitle())
      body: StreamBuilder(
        stream: theStream();
        builder:(BuildContext context, AsyncSnapshot<List<AnObject>> snapshot) {

              if (latchRefresher != snapshot.requireData.length){//init the field on declare to latchRefresher =-1
                                      SchedulerBinding.instance
                                          .addPostFrameCallback((_) => setState(() {
                                        totalItem = snapshot.data.length;
                                       latchRefresher = snapshot.requireData.length;//this will cause only on change to request a refresh
                                      }));
              }
          return ListView.builder(
            itemCount: snapshot.requireData.length,            
            itemBuilder: (context, index) =>
              CardFromAnObject(snapshot,snapshot.requireData[index], context),
          );
        }
      ));}

uj5u.com熱心網友回復：

您可以獲取幫助addPostFrameCallback并更新計數。我在這個例子中使用了 counterStream。

class _TSCState extends State<TSC> {
  var counterStream =
      Stream<int>.periodic(const Duration(seconds: 1), (x) => x).take(15);

  int? itemsCount;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: itemsCount != null
              ? Text("total $itemsCount")
              : Text("loading") // null // or use others expression
          ),
      body: StreamBuilder<int>(
        stream: counterStream,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
              setState(() {
                itemsCount = snapshot.data!;
              });
            });
            return ListView.builder(
              itemCount: snapshot.data!,
              itemBuilder: (context, index) => ListTile(
                title: Text("Item $index"),
              ),
            );
          } else {
            //handle others state
            return CircularProgressIndicator();
          }
        },
      ),
    );
  }
}

uj5u.com熱心網友回復：

我使用 Yeasin Sheikh 的示例代碼實作了我的建議。

因為流生成器在示例代碼中生成一個 int 值，
所以我使用了 'snapshot.requiredData' 而不是 'snapshot.requiredData.length'。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: TSCState(),
    );
  }
}

class TSCState extends StatefulWidget {
  TSCState({Key key}) : super(key: key);

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

class _TSCStateState extends State<TSCState> {
  var counterStream =
      Stream<int>.periodic(const Duration(seconds: 1), (x) => x).take(15);

  int itemsCount;
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<int>(
      stream: counterStream,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return Scaffold(
            appBar: AppBar(
              title: Text("total ${snapshot.requireData}"),
            ),
            body: ListView.builder(
              itemCount: snapshot.data,
              itemBuilder: (context, index) => ListTile(
                title: Text("Item $index"),
              ),
            ),
          );
        } else {
          return Scaffold(
            appBar: AppBar(title: Text("total")),
            body: CircularProgressIndicator(),
          );
        }
      },
    );
  }
}

uj5u.com熱心網友回復：

您可以使用另一個 StreamBuilder 包裝 AppBar 標題屬性，然后在流“theStream”完成時更新它。

我在這個要點上上傳了一個示例代碼：https : //gist.github.com/Alvarocda/140bbafb7eb24441ba9612a8ccf068ad

基本上，雖然 _appBarCountStreamController 在流上有一個空值，但您的應用欄將顯示“正在加載”。

當您的流“theStream”運行時，您將串列的長度添加到 __appBarCountStreamController，它將僅重建應用欄標題。

不要忘記在 dispose 方法上關閉 _appBarCountStreamController。

標籤：扑 镖 列表显示 溪流

上一篇：如何解決Flutter中的ignore:deprecated_member_use？

下一篇：Dart/Flutter：如何計算包含相同鍵的多個地圖的值？