在Flutter中使用iOS行为时更改ListView反弹颜色 [英] Changing ListView bounce color when using iOS behavior in Flutter

问题描述

在创建 ListView 时(

遵循

以及完整源代码，供您试用:

  import'package:flutter/material.dart';void main()=>runApp(MyApp());MyApp类扩展了StatelessWidget {@override窗口小部件build(BuildContext context){返回MaterialApp(主题:ThemeData()，家:脚手架(正文:SafeArea(子代:集装箱(颜色:Colors.green，子级:ListView(孩子们:generateChildren())，)，)，)，);}列表< Widget>generateChildren(){列表< Widget>结果= [];对于(int i = 0; i< 20; i ++){result.add(容器(颜色:Colors.white，子代:ListTile(开头:Icon(Icons.map)，标题:Text('Map')，)，))；}返回结果；}} 

When creating a ListView (example from docs), how do we change the bounce color that appears at the top of the list when scrolling using an iOS emulator with Flutter?

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'),
    ),
  ],
);

Following this question, in iOS development without Flutter, you would do something like this to position a view offscreen to change the bounce color:

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)
}

Is there an equivalent for Flutter?

解决方案

In Flutter the bouncing color, is simply the color of the Widget you can see behind the ListView. The default background of the ListView is transparent. Therefore you can simply wrap it in a Container with another color.

The following example has a green bouncing color:

And the complete source code, for trying out:

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;
  }
}

这篇关于在Flutter中使用iOS行为时更改ListView反弹颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！