拨开荷叶行,寻梦已然成。仙女莲花里,翩翩白鹭情。
IMG-LOGO
主页 文章列表 ListView.builder在Flutter中的Stack中不重叠

ListView.builder在Flutter中的Stack中不重叠

白鹭 - 2022-02-10 2053 0 0

我一直在使用ListView.builderStack但是圆形容器彼此不重叠。我怎样才能重叠它们?我还附上了输出的代码和荧屏截图。

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

电流输出

ListView.builder 在 Flutter 中的 Stack 中不重叠

我期待什么

ListView.builder 在 Flutter 中的 Stack 中不重叠

uj5u.com热心网友回复:

在您的情况下,您只想生成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),
          ),
        ),
      ),
    ),
  ],
),

更多关于ListViewStack

标签:

0 评论

发表评论

您的电子邮件地址不会被公开。 必填的字段已做标记 *