flutter - 如何自动更正 ListView 中的滚动位置？ ( flutter )

Question

我有一个水平的 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;
  }
}

或者是否可以设置一个可以滚动的固定宽度？

Answer 1

看来你在找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')),
          ),
        ],
      ),
    );
  }
}