我一直在使用水平和垂直滚动创建布局。垂直滚动条Column
用于主要内容,并由不同的视图填充,包括ListView
显示促销横幅的水平视图。我想显示滚动条用于垂直滚动,而不显示水平滚动。我已经包装了SingleChildScrollView
使可以Column
滚动的ScrollBar
,但是该条在水平滚动条上都垂直显示。这些事情有什么微调吗?
样本来证明问题
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Scrollables',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Scrollbar(
child: new SingleChildScrollView(
child: new Container(
padding: EdgeInsets.only(top: 40.0),
child: Column(children: <Widget>[
HorizontalListView(),
VerticalListView(),
]),
)),
),
);
}
}
class HorizontalListView extends StatelessWidget {
var items = new List<String>();
_addNewItem(int index) {
items.add("Item $index");
}
@override
Widget build(BuildContext context) => Container(
height: 120,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 15,
itemBuilder: (context, index) {
return Card(child: ListItem(index));
}));
}
class VerticalListView extends StatelessWidget {
var items = new List<String>();
_addNewItem(int index) {
items.add("Item $index");
}
@override
Widget build(BuildContext context) => Container(
child: ListView.builder(
scrollDirection: Axis.vertical,
itemCount: 50,
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return ListItem(index);
}));
}
class ListItem extends StatelessWidget {
int _index;
ListItem(this._index);
@override
Widget build(BuildContext context) {
return Container(
width: 280,
child: Text("Item ${this._index}"),
);
}
}
注意水平滚动的底部
class NoScrollbar extends StatelessWidget {
final Widget child;
const NoScrollbar({Key key, this.child}) : super(key: key);
@override
Widget build(BuildContext context) {
return NotificationListener<ScrollNotification>(
onNotification: (_) => true,
child: child,
);
}
}
只需将NoScrollbar Widget包裹在Scrolling Widget周围,就不想让Scrollbar出现。这为我解决了!
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句