Flutter，在 SliverFillRemaining 中使用 FutureBuilder

Question

我正在使用 SliverFillRemaining 中的 Listview 构建 FutureBuilder。而且我认为由于 Sliver 已经在 CustomScrollView 中，因此滚动功能无法正常工作。一旦它向下滚动，它就不会向上滚动。

下面是代码。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            expandedHeight: 200.0,
            floating: false,
            //pinned: false,
            flexibleSpace: FlexibleSpaceBar(
              background: Image.network("https://i.imgur.com/p3CfZBS.png",
                  fit: BoxFit.cover),
            ),
          ),
          SliverFillRemaining(
            child: Container(
              child: FutureBuilder(
                future: _getData(),
                builder: (context, snapshot) {
                  if (snapshot.data == null) {
                    return Center(child: CircularProgressIndicator());
                  } else {
                    return ListView.builder(
                      itemCount: snapshot.data.length,
                      itemBuilder: (context, index) {
                        return ListView(
                          shrinkWrap: true,
                          children: [
                            buildlink(
                                imageName: snapshot.data[index].image,
                                page: snapshot.data[index].title)
                          ],
                        );
                      },
                    );
                  }
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

很可能第二个 listView 是多余的，并且您可能想使用物理：NeverScrollableScrollPhysics() 与列表视图，如果您使用 CustomScrollView。检查 NestedScrollView 在这种情况下可能会更好。

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,
      ),
      home: Scaffold(
        body: SafeArea(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            expandedHeight: 200.0,
            floating: false,
            pinned: false,
            flexibleSpace: FlexibleSpaceBar(
              background: Image.network("https://i.imgur.com/p3CfZBS.png",
                  fit: BoxFit.cover),
            ),
          ),
          SliverFillRemaining(
            child: Container(
              child: FutureBuilder(
                future: _getData(),
                builder: (context, snapshot) {
                  if (snapshot.data == null) {
                    return Center(child: CircularProgressIndicator());
                  } else {
                    return ListView.builder(
                      physics: NeverScrollableScrollPhysics(),
                      itemCount: snapshot.data.length,
                      itemBuilder: (context, index) {
                        return buildlink(
                          imageName: snapshot.data[index].image,
                          page: snapshot.data[index].title,
                        );
                      },
                    );
                  }
                },
              ),
            ),
          ),
        ],
      ),
    );
  }

  Future<List<LinkData>> _getData() async {
    await Future.delayed(Duration(seconds: 1));
    return [
      LinkData(image: "https://i.imgur.com/p3CfZBS.png", title: 'First'),
      LinkData(image: "https://i.imgur.com/p3CfZBS.png", title: 'Second'),
      LinkData(image: "https://i.imgur.com/p3CfZBS.png", title: 'Third'),
    ];
  }

  Widget buildlink({String imageName, String page}) {
    return Card(
      child: Container(
        child: Text(page),
        height: 400,
      ),
    );
  }
}

class LinkData {
  const LinkData({
    this.image,
    this.title,
  });

  final String image;
  final String title;
}