firebase - 无法在我的 Flutter 应用程序中获得 Sliver 效果

Question

我正在实现下面的代码，但条子效果根本不起作用。我在下面的代码中做错了什么？

我已经引用了这个示例链接，在 SliverFillRemaining 中我刚刚用 StreamBuilder() 替换了 Column()，我还应该添加或删除什么来获得条子效果？

return Scaffold(
     body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(expandedHeight: 100,
        pinned: false,
        flexibleSpace: FlexibleSpaceBar(
          title: Text('FilledStacks'),
          background: Image.asset(
            'assets/user.png', // <===   Add your own image to assets or use a .network image instead.
            fit: BoxFit.cover,
          ),
        ),
          ),

          SliverFillRemaining(
            child: StreamBuilder<QuerySnapshot>(
              stream: query.snapshots(),
              builder: (context,snapshot){
                //String itemTitle = snapshot.data.documents[index]['postContent'];

                if (!snapshot.hasData){
                  return Text("Loading");
                }

                return ListView.builder(

                    itemCount: snapshot.data.documents.length,
                    itemBuilder: (context, index){
                      String itemTitle = snapshot.data.documents[index]['itemTitle'];

                      return CardItem(itemTitle:itemTitle,);

                    });
              },
            ),
          )
        ],
      ),
    );

标签： firebaseflutterdartgoogle-cloud-firestoreflutter-sliver

Answer 1

尝试以下操作：

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';

void main() => runApp(SilverAppBarExample());

class SilverAppBarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              leading: IconButton(
                  icon: Icon(Icons.filter_1),
                  onPressed: () {
                    // Do something
                  }),
              expandedHeight: 220.0,
              floating: true,
              pinned: true,
              snap: true,
              elevation: 50,
              backgroundColor: Colors.pink,
              flexibleSpace: FlexibleSpaceBar(
                  centerTitle: true,
                  title: Text('Title',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16.0,
                      )),
                  background: Image.network(
                    'https://images.pexels.com/photos/443356/pexels-photo-443356.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
                    fit: BoxFit.cover,
                  )),
            ),
            StreamBuilder<QuerySnapshot>(
              stream: Firestore.instance.collection("countries").snapshots(),
              builder: (context, snapshot) {
                return SliverList(
                    delegate: new SliverChildBuilderDelegate(
                  (context, index) {
                    return ListTile(
                      contentPadding: EdgeInsets.all(100.0),
                      title: Text(
                          snapshot.data.documents[index].data["countryName"]),
                    );
                  },
                  childCount:
                      snapshot.hasData ? snapshot.data.documents.length : 0,
                ));
              },
            ),
          ],
        ),
      ),
    );
  }
}

您需要使用SliverList并在其中返回您拥有的数据列表，然后滚动将起作用。