ListView.builder 在 Flutter 的堆棧中不重疊

Question

我一直在Stack中使用ListView.builder 。 但圓形容器不相互重疊。 我怎樣才能重疊它們？ 我還附上了 output 的代碼和屏幕截圖。

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),
                      ),
                    );
                  }),
            ],
          ),
        ),
      ),
    );
  }
}

當前Output

我期待什么

Answer 1

ListView是最常用的滾動小部件。 它在滾動方向上一個接一個地顯示其子級。 在交叉軸上，子項需要填充 ListView。

在您的情況下，您只想生成13 Container ，使用 loop 或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和Stack