需要包裹一个可滑动的组件,并通过behavior属性控制滑动的效果,可以去除滑动的蓝色阴影等。
相关组件
ScrollConfiguration基本使用
<br />【child】 : 子组件 【Widget】<br />【behavior】 : 滑动行为 【ScrollBehavior】<br /> 可以使用ScrollConfiguration让ListView无蓝色阴影<br />
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;
}