需要包裹一个可滑动的组件,并通过behavior属性控制滑动的效果,可以去除滑动的蓝色阴影等。

相关组件

ListView GridView SingleChildScrollView

ScrollConfiguration基本使用

  1. <br />【child】 : 子组件 【Widget】<br />【behavior】 : 滑动行为 【ScrollBehavior】<br /> 可以使用ScrollConfiguration让ListView无蓝色阴影<br />![213.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589511903220-fa34cd58-6eed-4e00-8397-65f79688d122.gif#align=left&display=inline&height=215&margin=%5Bobject%20Object%5D&name=213.gif&originHeight=215&originWidth=395&size=438453&status=done&style=none&width=395)
import 'package:flutter/material.dart';
class CustomScrollConfiguration extends StatelessWidget {
  final data = <Color>[
    Colors.cyan[50],
    Colors.cyan[100],
    Colors.cyan[200],
    Colors.cyan[300],
    Colors.cyan[400],
    Colors.cyan[500],
    Colors.cyan[600],
    Colors.cyan[700],
    Colors.cyan[800],
    Colors.cyan[900],
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: ScrollConfiguration(
          behavior: NoScrollBehavior(), child: _buildListView()),
    );
  }

  Widget _buildListView() => ListView(
        padding: EdgeInsets.symmetric(horizontal: 5),
        children: data
            .map((color) => Container(
                  alignment: Alignment.center,
                  width: 100,
                  height: 50,
                  color: color,
                  child: Text(
                    colorString(color),
                    style: TextStyle(color: Colors.white, shadows: [
                      Shadow(
                          color: Colors.black,
                          offset: Offset(.5, .5),
                          blurRadius: 2)
                    ]),
                  ),
                ))
            .toList(),
      );

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}

class NoScrollBehavior extends ScrollBehavior {
  @override
  Widget buildViewportChrome(
          BuildContext context, Widget child, AxisDirection axisDirection) =>
      child;
}