Flutter 如何使用 Listview Builder 提出堆栈中的项目

Question

这是我的小部件。

ListView.builder(
          scrollDirection: Axis.horizontal,
          controller: scrollController,
          shrinkWrap: true,
          itemCount: 2,
          itemBuilder: (BuildContext context, int index) {
            return Tooltip(
              message: controller.salonModel.barberListName(index),
              decoration: BoxDecoration(
                  color: primary, borderRadius: BorderRadius.circular(10)),
              child: Align(
                widthFactor: 0.7,
                alignment: Alignment.topCenter,
                child: CircularPhotoContainer(
                  width: 50,
                  photoUrl: controller.salonModel.barberListPhotos(index),
                  borderColor: index == 0 ? secondary : bGroundColor,
                  color: bGroundColor,
                  borderWidth: 4,
                  radius: 100,
                  boxFit: BoxFit.cover,
                  opacity: 1,
                ),
              ),
            );
          }),

这是ui。

我想像这样提出我的第一个项目，但我没有那样做。

那我该怎么做呢？

Answer 1

在你的 ListView.builder 上使用 reverse: true, 如果你想在 UI 上订购商品，你可以使用索引作为 length-index-1

ListView.builder(
  scrollDirection: Axis.horizontal,
  shrinkWrap: true,
  itemCount: 5,
  reverse: true, //this
  itemBuilder: (BuildContext context, int index) {.....

测试示例

class ListTe extends StatelessWidget {
  const ListTe({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List<Color> colors = [Colors.red, Colors.green, Colors.pink];
    return Scaffold(
      body: ListView.builder(
        scrollDirection: Axis.horizontal,
        shrinkWrap: true,
        itemCount: colors.length,
        reverse: true,
        itemBuilder: (BuildContext context, int index) {
          return Align(
            widthFactor: 0.7,
            alignment: Alignment.topCenter,
            child: Container(
              width: 50,
              decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: colors[colors.length - 1 - index]),
            ),
          );
        },
      ),
    );
  }
}

Flutter 如何使用 Listview Builder 提出堆栈中的项目

Flutter How to bring forward a item in stack with Listview Builder

flutter

flutter-layout