flutter - 我的水平滚动遇到麻烦- flutter

Question

希望您今天过得不错。我在水平滚动中有一个问题。图像应该向左和向右滚动，并根据图片而定，您将按下按钮并具有猜测图片类型的能力。由于某些原因，图像和标签与图像不匹配。图像名称链接到_MyHomePageState中的vehicleNames列表。我还包括了image_card.dart来展示ImageCard的工作原理。谢谢您的第二眼。

主镖

import 'dart:ui';
import 'package:flutter/material.dart';
import 'image_card.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Guess the car!'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin{

  String curVehName = "";
  double scrollPercent = 0.0;
  Offset startDrag;
  double startDragPercentScroll;
  double finishScrollStart;
  double finishScrollEnd;
  AnimationController finishScrollController;

  List<String> vehicleNames = [
    'bmw',
    'ford',
    'rover',
    'toyota'
  ];

  @override
  initState(){
    super.initState();
    finishScrollController = AnimationController(
      duration: Duration(milliseconds: 150),
      vsync: this,
    )..addListener(() { 
      setState(() {
        scrollPercent = lerpDouble(finishScrollStart, finishScrollEnd,
            finishScrollController.value);
      });
    });

    @override
    dispose(){
      finishScrollController.dispose();
      super.dispose();
    }
  }

  List<Widget> buildCards(){
    List<Widget> cardList = [];
    for(int i = 0; i < vehicleNames.length;i++){
      cardList.add(buildCard(i,scrollPercent));
      print("index: ${i}");
    }
    return cardList;
  }

  Widget buildCard(int cardIndex, double scrollPercent){

    final cardScrollPercent = scrollPercent / ( 1 / vehicleNames.length);

    return FractionalTranslation(
      translation: Offset(cardIndex-cardScrollPercent,0.0),
      child: Padding(
        padding: EdgeInsets.all(8.0),
        child: ImageCard(imageName: vehicleNames[cardIndex],
        ),
      ),
    );
  }

  onHorizontalDragStart(DragStartDetails details){
    startDrag = details.globalPosition;
    startDragPercentScroll = scrollPercent;
  }

  onHorizontalDragUpdate(DragUpdateDetails details){
    final currentDrag = details.globalPosition;
    final dragDistance = currentDrag.dx - startDrag.dx;
    final singleCardDragPercent = dragDistance / context.size.width;

    setState(() {
      scrollPercent = ( startDragPercentScroll + ( -singleCardDragPercent
          / vehicleNames.length)).clamp(0.0, 1.0-(1/vehicleNames.length));
    });
  }

  onHorizontalDragEnd(DragEndDetails details){
    finishScrollStart = scrollPercent;
    finishScrollEnd = (scrollPercent * vehicleNames.length).round()
        /vehicleNames.length;

    finishScrollController.forward(from: 0.0);

    setState(() {
      startDrag = null;
      startDragPercentScroll = null;
      curVehName = '';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            GestureDetector(
              onHorizontalDragStart: onHorizontalDragStart,
              onHorizontalDragUpdate: onHorizontalDragUpdate,
              onHorizontalDragEnd: onHorizontalDragEnd,
              behavior: HitTestBehavior.translucent ,
              child: Stack(
                children: buildCards(),
              ),
            ),
            OutlineButton(
              padding: EdgeInsets.all(10.0),
              onPressed: (){
                setState((){
                  this.curVehName = vehicleNames[(scrollPercent*10).round()];
                });
              },
              child: Text(
                  'Show Answer',
                style: TextStyle(
                  fontSize: 30,
                  fontWeight: FontWeight.bold,
                  color: Colors.black,
                ),
              ),
              borderSide: BorderSide(
                color: Colors.black,
                width: 4.0,
              ),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(30.0),
              ),
              highlightedBorderColor: Colors.black,
            ),
            Text(
              curVehName,
              style: TextStyle(
                fontSize: 40,
                fontWeight: FontWeight.bold,
                color: Colors.blue,
                letterSpacing: 2,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

image_card.dart

import 'package:flutter/material.dart';

class ImageCard extends StatelessWidget{

  final String imageName;

  ImageCard({this.imageName});

  @override
  Widget build(BuildContext context) {

    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(15.0),
        border: Border.all(
          color: Colors.black,
          width: 4.0,
        ),
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(10.0),
        child: Image.asset(
          'assets/images/$imageName.jpg',
          height: 300,
          fit: BoxFit.fitHeight,
        ),
      ),
    );
  }
}

Answer 1

我相信我找到了问题。看来

this.curVehName = vehicleNames[(scrollPercent*10).round()];

硬编码我的车辆名称列表中所需数字的值。一旦我添加了10张图片并将名称添加到列表中，它就可以按照指示进行工作。现在的目标是查看是否可以将其设为动态列表。