Flutter：单击上一个和前进按钮时如何左右移动水平滚动

Question

我在 ListView 中添加了两个按钮。当我单击预览和前进按钮时，它将是左右移动的水平滚动。我想在单击左侧按钮时向左滚动，并且我想在单击右侧按钮时向右滚动。但我不知道该怎么做。这是源代码。

class ScrolllingOnClickButton extends StatefulWidget {
  @override
  _ScrolllingOnClickButtonState createState() => _ScrolllingOnClickButtonState();
}

class _ScrolllingOnClickButtonState extends State<ScrolllingOnClickButton> {
  @override
  Widget build(BuildContext context) {
    var sizeDevice = MediaQuery.of(context).size;

    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: <Widget>[
            Expanded(
                flex: 1,
                child: Container(
                  color: Colors.green,
                )),
            Expanded(
                flex: 2,
                child: Row(
                  children: <Widget>[
                    ClipOval(
                      child: Material(
                        color: Colors.blue,
                        child: InkWell(
                          splashColor: Colors.red,
                          child: SizedBox(
                              width: 56,
                              height: 56,
                              child: Icon(Icons.arrow_back)),
                          onTap: () {},
                        ),
                      ),
                    ),
                    Expanded(
                        flex: 2,
                        child: Container(
                          color: Colors.transparent,
                        )),
                    ClipOval(
                      child: Material(
                        color: Colors.blue,
                        child: InkWell(
                          splashColor: Colors.red,
                          child: SizedBox(
                              width: 56,
                              height: 56,
                              child: Icon(Icons.arrow_forward)),
                          onTap: () {},
                        ),
                      ),
                    ),
                  ],
                )),
            Expanded(
              flex: 16,
              child: Container(
                child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    physics: PageScrollPhysics(),
                    itemCount: word_data.drink.length,
                    itemBuilder: (BuildContext context, int index) {
                      return Container(
                        child: Column(
                          children: <Widget>[
                            Expanded(
                                flex: 6,
                                child: GestureDetector(
                                  onTap: () {},
                                  child: Container(
                                    color: Colors.purple,
                                    child: Padding(
                                      padding: const EdgeInsets.all(10.0),
                                      child: Image.asset(
                                        "asset/drink_images/" +
                                            word_data.drink[index] +
                                            ".png",
                                        fit: BoxFit.contain,
                                      ),
                                    ),
                                  ),
                                )),
                          ],
                        ),
                        width: sizeDevice.width,
                      );
                    }),
                color: Colors.yellow,
              ),
            ),
            Expanded(
                flex: 2,
                child: Container(
                  color: Colors.lightBlueAccent,
                ))
          ],
        ),
      ),
    );
  }
}

Answer 1

我推荐使用这个包carousel_slider。这将为您节省大量时间来实现滑块行为。

我在这里创建了一个示例应用供您测试：

import 'package:carousel_slider/carousel_options.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

void main() => runApp(CarouselDemo());

class CarouselDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: BasicDemo());
  }
}

class BasicDemo extends StatelessWidget {
  final controller = CarouselController();

  @override
  Widget build(BuildContext context) {
    List<int> list = [1, 2, 3, 4, 5];
    return Scaffold(
      appBar: AppBar(title: Text('Basic demo')),
      body: Container(
          height: 400,
          child: Column(
            children: [
              Expanded(
                child: CarouselSlider(
                  carouselController: controller,
                  options: CarouselOptions(),
                  items: list
                      .map((item) => Container(
                            child: Center(child: Text(item.toString())),
                            color: Colors.green,
                          ))
                      .toList(),
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  IconButton(
                      icon: Icon(Icons.arrow_back_ios),
                      onPressed: () => controller.previousPage()),
                  IconButton(
                      icon: Icon(Icons.arrow_forward_ios),
                      onPressed: () => controller.nextPage())
                ],
              )
            ],
          )),
    );
  }
}