Comment corriger automatiquement la position de défilement dans un listview ? (flutter)

Question

J'ai un listviewbuilder horizontal comme indiqué dans l'image du haut :

Existe-t-il un moyen de corriger automatiquement la position actuelle afin que le widget situé dans le coin droit s'adapte parfaitement à toute sa largeur (ici le numéro 27)Parce que si vous arrêtez le défilement, il n'est pas joli s'il est coupé comme le numéro 27 dans l'image. Est-il possible de s'arrêter uniquement sur le widget le plus large afin que la position actuelle ne soit pas comme dans l'image ?

Voici mon code pour le constructeur de 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;
  }
}

Ou est-il possible de définir une largeur fixe que l'on peut faire défiler ?

Answer 1

Il semble que vous cherchiez PageScrollPhysics . Extrait de la documentation de la classe PageScrollPhysics :

Physique de défilement utilisée par une PageView. Cette physique permet à la vue de la page de s'adapter aux limites de la page.

Avoir votre ListView 's physics la propriété est réglée sur PageScrollPhysics fera défiler la liste de manière paginée et discrète. Si vous définissez également la largeur des widgets à l'intérieur de l'élément ListView est égale à une fraction de la largeur de l'écran, alors les widgets à l'intérieur de l'élément ListView ne sera jamais coupé, quel que soit le nombre d'éléments de la liste, la taille de l'écran ou la façon dont l'utilisateur fait défiler la liste.

Jetez un coup d'œil à cet exemple que j'ai écrit pour vous montrer comment mettre en œuvre ce type de physique de défilement. Vous pouvez le copier et l'exécuter dans DartPad pour voir si c'est ce que vous recherchez. Notez qu'il y a 3 entrées par page déroulée, mais qu'il y a 7 entrées au total dans la base de données de l'UE. ListView et il n'y a aucun moyen de les couper dans la vue.

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')),
          ),
        ],
      ),
    );
  }
}