我有一个水平的 listviewbuilder,如上图所示:
有没有办法自动更正当前位置,使右上角的小部件完全适合他的全宽? (这里是数字 27)因为如果你停止滚动,如果它像图片中的数字 27 那样被剪掉,它看起来不太好看。那么有没有可能只停在最全的itemwidget上,这样当前位置就不会像图片中那样了?
这是我的 ListView 生成器代码:
import './date_widget.dart';
import 'package:date_picker_timeline/gestures/tap.dart';
import 'package:flutter/material.dart';
import 'package:intl/date_symbol_data_local.dart';
class MyDatePickerTimeline extends StatefulWidget {
DateTime currentDate;
DateChangeListener onDateChange;
String locale;
// Creates the DatePickerTimeline Widget
MyDatePickerTimeline(
this.currentDate, {
Key key,
this.onDateChange,
this.locale = "de",
}) : super(key: key);
@override
State<StatefulWidget> createState() => new _MyDatePickerTimelineState();
}
class _MyDatePickerTimelineState extends State<MyDatePickerTimeline> {
@override void initState() {
super.initState();
initializeDateFormatting(widget.locale, null);
}
@override
Widget build(BuildContext context) {
return Container(
// padding: EdgeInsets.only(bottom: 600),
width: MediaQuery.of(context).size.width ,
height: 200,
child: ListView.builder(
reverse: true,
itemCount: 5000,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
// Return the Date Widget
DateTime _date = DateTime.now().subtract(Duration(days: index));
DateTime date = new DateTime(_date.year, _date.month, _date.day);
bool isSelected = compareDate(date, widget.currentDate);
return MyDateWidget(
date: date,
locale: widget.locale,
selectionColor:
isSelected ? Colors.black12 : Colors.transparent,
onDateSelected: (selectedDate) {
// A date is selected
if (widget.onDateChange != null) {
widget.onDateChange(selectedDate);
}
setState(() {
widget.currentDate = selectedDate;
});
},
);
},
),
);
}
bool compareDate(DateTime date1, DateTime date2) {
return date1.day == date2.day &&
date1.month == date2.month &&
date1.year == date2.year;
}
}
或者是否可以设置一个可以滚动的固定宽度?
最佳答案
看来你在找PageScrollPhysics .来自 PageScrollPhysics 类文档:
Scroll physics used by a PageView. These physics cause the page view to snap to page boundaries.
将 ListView
的 physics
属性设置为 PageScrollPhysics
将使列表以分页、离散的方式滚动。如果您还将 ListView
中的小部件的宽度设置为屏幕宽度的一小部分,那么 ListView
中的小部件将永远不会被剪切,无论有多少项列表中有,屏幕有多大,或者用户如何滚动。
查看我编写的这个示例,向您展示实现这种滚动物理的方法。您可以复制它并在DartPad 中运行它。看看它是否是您要查找的内容。请注意,每滚动一页有 3 个条目,但 ListView
中总共有 7 个条目,并且无法在 View 中剪切其中的任何条目。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ListView(
physics: PageScrollPhysics(),
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width/3,
color: Colors.amber[900],
child: const Center(child: Text('Entry A')),
),
Container(
width: MediaQuery.of(context).size.width/3,
color: Colors.amber[800],
child: const Center(child: Text('Entry B')),
),
Container(
width: MediaQuery.of(context).size.width/3,
color: Colors.amber[700],
child: const Center(child: Text('Entry C')),
),
Container(
width: MediaQuery.of(context).size.width/3,
color: Colors.amber[600],
child: const Center(child: Text('Entry D')),
),
Container(
width: MediaQuery.of(context).size.width/3,
color: Colors.amber[500],
child: const Center(child: Text('Entry E')),
),
Container(
width: MediaQuery.of(context).size.width/3,
color: Colors.amber[400],
child: const Center(child: Text('Entry F')),
),
Container(
width: MediaQuery.of(context).size.width/3,
color: Colors.amber[300],
child: const Center(child: Text('Entry G')),
),
],
),
);
}
}
关于flutter - 如何自动更正 ListView 中的滚动位置? ( flutter ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60458885/