如何知道列表何时足够长可以滚动？

Question

下面的屏幕截图由两个产品列表组成，一个太短而无法滚动，另一个则足够长而无法滚动。

为了这个问题，下面是带有更明显颜色的屏幕截图，以便更清晰：

为了向用户指示该列表是可滚动的，我在列表末尾堆叠了一个渐变。

我希望此渐变仅在列表足够长以可滚动时出现，但我无法找到区分可滚动列表和不可滚动列表的方法。

下面是具有底层列表和梯度的堆栈的代码：

Stack(
  children: <Widget>[
    ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        //children go here
      ],
    ),
    Align(
      alignment: Alignment.centerRight,
      child: Container(
        width: 24,
        height: 24,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: FractionalOffset.centerRight,
            end: FractionalOffset.centerLeft,
            colors: [
              Colors.green,
              Colors.yellow
            ],
            stops: [
              0.0,
              1.0
            ]))),
    ),
  ],
),

Answer 1

我根据你的要求做了一个简单的案例。首先构建列表并计算所有项目的宽度总和，
如果所有项目的宽度超过Listview容器的宽度，则
重绘显示它可以滚动的指示器。

修改的

我更改为获取宽度动态 ListView 宽度。
您可以仅使用更改“listItemLength”值进行测试。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "App",
      theme: new ThemeData(primarySwatch: Colors.amber),
      home: Test(),
    );
  }
}

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  List<GlobalKey> _globalKeys = [];
  GlobalKey _listviewGLobalKey = GlobalKey();
  double listTotalWidth = 0.0;
  double listviewWidth = 0.0;
  int listItemLength = 14;

  @override
  void initState() {
    super.initState();
    for (var i = 0; i < listItemLength; i++) {
      _globalKeys.add(GlobalKey());
    }

    WidgetsBinding.instance.addPostFrameCallback((_) => _getSizes());
  }

  _getSizes() {
    // Get a total Items width
    listTotalWidth = 0.0;
    _globalKeys.forEach((key) {
      final RenderBox renderBoxRed = key.currentContext.findRenderObject();
      final containerSize = renderBoxRed.size;
      listTotalWidth += containerSize.width;
    });
    print('total items width sum: $listTotalWidth');

    // Get a ListView's width
    final RenderBox listviewRenderBoxRed =
        _listviewGLobalKey.currentContext.findRenderObject();
    final listviewContainerSize = listviewRenderBoxRed.size;
    listviewWidth = listviewContainerSize.width;
    print('ListView width: $listviewWidth');

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    // print('**** ${_scrollController.position.maxScrollExtent}');
    //  WidgetsBinding.instance
    //           .addPostFrameCallback((_) => _getSizes());
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Title",
      theme: new ThemeData(primarySwatch: Colors.amber),
      home: Scaffold(
        body: SafeArea(
          child: Container(
            child: Row(
              children: <Widget>[
                Expanded(
                  child: ListView.builder(
                    key: _listviewGLobalKey,
                    scrollDirection: Axis.horizontal,
                    itemCount: listItemLength,
                    itemBuilder: (context, index) {
                      return Container(
                          key: _globalKeys[index],
                          padding: EdgeInsets.symmetric(horizontal: 5),
                          child: Center(
                              child: Text(
                            'aaa$index',
                          )));
                    },
                  ),
                ),
                if (listTotalWidth > listviewWidth) Icon(Icons.add),
              ],
            ),
          ),
        ),
      ),
    );
  }
}