在 Flutter 中使用 iOS 行为时更改 ListView 反弹颜色

Question

在创建ListView（来自文档的示例）时，我们如何更改使用带有 Flutter 的 iOS 模拟器滚动时出现在列表顶部的反弹颜色？

ListView(
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.map),
      title: Text('Map'),
    ),
    ListTile(
      leading: Icon(Icons.photo_album),
      title: Text('Album'),
    ),
    ListTile(
      leading: Icon(Icons.phone),
      title: Text('Phone'),
    ),
  ],
);

按照这个问题，在没有 Flutter 的 iOS 开发中，你会做这样的事情来定位屏幕外的视图以更改反弹颜色：

override func viewDidLoad() {
    super.viewDidLoad()
    let topView = UIView(frame: CGRect(x: 0, y: -collectionView!.bounds.height,
        width: collectionView!.bounds.width, height: collectionView!.bounds.height))
    topView.backgroundColor = .blackColor()
    collectionView!.addSubview(topView)
}

Flutter 是否有等价物？

Answer 1

在 Flutter 中，弹跳颜色只是您可以在ListView后面看到的 Widget 的颜色。默认背景ListView是透明的。因此，您可以简单地将其包装在具有另一种颜色的容器中。

以下示例具有绿色反弹颜色：

以及完整的源代码，供尝试：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(),
      home: Scaffold(
        body: SafeArea(
          child: Container(
            color: Colors.green,
            child: ListView(
              children: generateChildren()
            ),
          ),
        ),
      ),
    );
  }

  List<Widget> generateChildren() {
    List<Widget> result = [];

    for (int i = 0; i < 20; i++) {
      result.add(Container(
        color: Colors.white,
        child: ListTile(
          leading: Icon(Icons.map),
          title: Text('Map'),
        ),
      ));
    }

    return result;
  }
}