如何在flutter中显示图像的索引列表?

jfewjypa  于 2023-01-09  发布在  Flutter
关注(0)|答案(1)|浏览(121)

我想创建一个小部件,图像显示在一行。
每张图像的宽度与器械宽度相同。
所以我创建了一个包含图像小部件的列表视图。
但是一些图像大于设备高度并且图像被裁剪。
我能为我的Flutter项目做些什么?
我试过了。

ListView.builder(
        shrinkWrap: true,
        scrollDirection:
            widget.options.isHorizontal! ? Axis.horizontal : Axis.vertical,
        physics:
            widget.options.isHorizontal! ? const PageScrollPhysics() : null,
        itemCount: widget.items?.length,
        itemBuilder: (BuildContext context, int index) {
          return Image.memory(
            widget.items![index],
            width: widget.options.isHorizontal!
                ? null
                : MediaQuery.of(context).size.width,
            height: widget.options.isHorizontal!
                ? MediaQuery.of(context).size.height
                : null,
            fit:
                widget.options.isHorizontal! ? BoxFit.contain : BoxFit.fitWidth,
          );
        },
      )
goucqfw6

goucqfw61#

  • 可以使用约束框
  • 这是示例代码。
  • 这个例子中的JumpTo部分还不是很完美,我希望你能通过学习ScrollNotification来实现。
import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  late ScrollController _controller;
  bool lock = false;
  @override
  void initState() {
    _controller = ScrollController();
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    var maxWidth = MediaQuery.of(context).size.width;
    var maxHeight = MediaQuery.of(context).size.height;

    return Scaffold(
      body: NotificationListener<ScrollNotification>(
        child: ListView.builder(
          controller: _controller,
          physics: ClampingScrollPhysics(),
          itemCount: 20,
          itemExtent: maxWidth,
          itemBuilder: (context, index) {
            return ConstrainedBox(
                constraints:
                    BoxConstraints(maxWidth: maxWidth, maxHeight: maxHeight),
                child: Image.network('https://picsum.photos/600'));
          },
          scrollDirection: Axis.horizontal,
        ),
        onNotification: (ScrollNotification notification) {
          if (notification is ScrollStartNotification) {
            lock = false;
          }
          if (notification is ScrollEndNotification &&
              !lock &&
              _controller.position.isScrollingNotifier.value &&
              _controller.position.hasPixels) {
            lock = true;
            var current = _controller.offset;
            var diffIndex = (current / maxWidth).floor();
            var isNext = ((current / maxWidth).toDouble() * 0.001) > 0.5;
            var nexPosition = 0.0;
            if (isNext) {
              nexPosition = (diffIndex + 1) * maxWidth;
            } else {
              nexPosition = diffIndex * maxWidth;
            }
            _controller.removeListener(() {});
            Future.delayed(Duration.zero, () {
              // _controller.jumpTo(nexPosition);
              _controller.animateTo(nexPosition,
                  duration: Duration(milliseconds: 400),
                  curve: Curves.fastOutSlowIn);
            }).whenComplete(() => _controller.addListener(() {}));
          }

          return lock;
        },
      ),
    );
  }
}

相关问题