ListView.builder 在 Flutter 的 Stack 中不重叠

Question

我一直在 Stack 中使用 ListView.builder。但是圆形容器彼此不重叠。我怎样才能重叠它们？我也附上了输出的代码和屏幕截图。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: 30,
        width: MediaQuery.of(context).size.width,
        margin: EdgeInsets.only(top: 10),
        child: Center(
          child: Stack(
            children: [
              ListView.builder(
                  itemCount: 13,
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  itemBuilder: (_, index) {
                    return Container(
                      height: 30,
                      width: 30,
                      decoration: BoxDecoration(
                        color: Colors.black,
                        borderRadius: BorderRadius.circular(15),
                      ),
                    );
                  }),
            ],
          ),
        ),
      ),
    );
  }
}

当前输出

我期待什么

Answer 1

ListView is the most commonly used scrolling widget. It displays its children one after another in the scroll direction. In the cross axis, the children are required to fill the ListView.

在您的情况下，您只想生成 13 Containers，使用循环或 List.generate 并使用 Positioned 小部件对齐它们。

我正在使用 left: index * 15, 它正在向右移动容器的半宽度。

child: Stack(
  children: [
    ...List.generate(
      13,
      (index) => Positioned(
        left: index * 15,
        child: Container(
          height: 30,
          width: 30,
          decoration: BoxDecoration(
            color: index.isEven ? Colors.black : Colors.grey,
            borderRadius: BorderRadius.circular(15),
          ),
        ),
      ),
    ),
  ],
),

更多关于ListView and Stack

ListView.builder 在 Flutter 的 Stack 中不重叠

ListView.builder is not overlapping in Stack in Flutter

dart

flutter

flutter-layout