需要包裹一个可滑动的组件,并通过behavior属性控制滑动的效果,可以去除滑动的蓝色阴影等。
相关组件
ScrollConfiguration基本使用
<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;
}