使用浮动应用栏创建应用时使用StreamBuilder

时间:2018-07-09 21:11:16

标签: flutter

这是使用浮动应用栏构建应用的代码:

 @override
Widget build(BuildContext context) {
return new Scaffold(
  body: new CustomScrollView(slivers: <Widget>[
    new SliverAppBar(
      title: new Text('Sliver App Bar'),
      floating: true,
      snap: true,
      bottom: PreferredSize(
        preferredSize: const Size.fromHeight(90.0),
        child: new Text('dddd'),
      ),
    ),
    new SliverList(
        delegate: new SliverChildListDelegate(buildTextViews(50)))
  ]),
);
}

这是使用StreamBuilder构建应用(无浮动应用栏)的代码:

 @override
Widget build(BuildContext context) {
return new Scaffold(
  appBar: new AppBar(
    backgroundColor: Colors.orangeAccent,
    title: new Text('Find Anything'),
    bottom: PreferredSize(
      preferredSize: const Size.fromHeight(48.0),
      child: new Text('dddd'),
    ),
  ),

  body: new StreamBuilder(
      stream: Firestore.instance.collection('posts').snapshots(),
      builder: (context, snapshot) {
        List<TekongoPost> posts = preparePosts(snapshot.data.documents);
        print("************$posts[0]*************");
        if (!snapshot.hasData) return const Text('Loading...');
        return ListView.builder(
          itemCount: posts.length,
          //              padding: const EdgeInsets.only(top: 10.0),
          //              itemExtent: 25.0,
          itemBuilder: (context,index) {
            return getListItem(context,posts[index]);
          },
        );
      }),
);
 }
 }

如何像上面第一种情况一样使用条形工具创建带有浮动应用程序栏的应用程序,并同时使用如上所述的StreamBuilder?

2 个答案:

答案 0 :(得分:7)

扑朔迷离的建造者什么都不做。您可以很好地将SliverList包装到StreamBuilder或其他任何构建器中。它仍将按预期工作。

因此,您唯一需要确定的是构建器正确返回Sliver之类的SliverList

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(),
    StreamBuilder<List<String>>(
      stream: myStream,
      builder: (context, snapshot) {
        return SliverList(
            delegate: SliverChildBuilderDelegate((context, index) {
              return ListTile(title: Text(snapshot.data[index]));
            },
            childCount: snapshot.hasData ? snapshot.data.length : 0,
          ),
        );
      },
    )
  ],
),

答案 1 :(得分:1)

我使用FutureBuilder使其工作

 return new Scaffold(
  body: new CustomScrollView(slivers: <Widget>[
    new SliverAppBar(
      title: new Text('Sliver App Bar'),
      floating: true,
      snap: true,
      bottom: PreferredSize(
        preferredSize: const Size.fromHeight(90.0),
        child: new Text('dddd'),
      ),
    ),
    FutureBuilder<List<String>>(
      future: getPosts(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.hasData) {
          return SliverList(
            delegate: new SliverChildBuilderDelegate((BuildContext context, int index) {
              return new Text(snapshot.data[index].toString());
            },
            childCount: snapshot.data.length),
          );

        } else {
          return new SliverList(
              delegate: SliverChildListDelegate(buildTextViews(50))
          );
        }
    }
),
  ]),
);
}