为什么要在弹奏中添加包装小部件的小部件时离开空间？

Question

我创建了一个自定义的小部件，该小部件是一个完全独立的类，因此在按下更多按钮的同时，应在包装小部件中添加自定义窗口小部件，所有内容都可以正常工作，但是在包装窗口内添加自定义窗口小部件时，它在右侧留出空间自定义小部件正在添加下一行。在下面，我附上了一个屏幕截图，我们可以在其中看到很多空间。 在这种情况下，我不想离开以下任何人会提供帮助。提前致谢。

这是我的代码

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

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);


  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int count =0;
  List images = [];

  void onCrossSelected(UniqueKey id) {
setState(() {
  print("${id.hashCode}");
  images.removeWhere((element) => element.id.hashCode == id.hashCode);
});
  }
  void addAtInitial() {
    setState(() {
      images.add(ItemButton(
        onCrossSelect: (UniqueKey sId) {
        onCrossSelected(sId);
      },
          id: UniqueKey(),
        initialItem: 0,
      ));
    });
  }

  @override
  void initState() {
    addAtInitial();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SingleChildScrollView(
              child: Wrap(
                children: [
                  ...images,
                  Padding(padding: const EdgeInsets.all(8.0),
                  child: Container(
                    child: GestureDetector(
                      onTap: () {
                        setState(() {
                          images.add(ItemButton(onCrossSelect: (UniqueKey sId) {
                            onCrossSelected(sId);
                          }, id: UniqueKey()));
                        });
                      },
                      child: Column(
                        children: [
                          Container(
                            color: Colors.black,
                            child: Icon(Icons.add,color: Colors.white,),
                          ),
                          Text("add more"),
                        ],
                      ),
                    ),
                  ),)
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

class ItemButton extends StatefulWidget {
  final ItemCallback onCrossSelect;
  final UniqueKey id;
  final int? initialItem;
  const ItemButton({Key? key, required this.onCrossSelect, required this.id, this.initialItem}) : super(key: key);

  @override
  _ItemButtonState createState() => _ItemButtonState();
}

typedef ItemCallback = void Function(UniqueKey count);

class _ItemButtonState extends State<ItemButton> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(8),
      child: Stack(
        children: [
          GestureDetector(
            onTap: () async {

            },
            child: Container(
              height: 90,
              width: 110,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15),
                color: Colors.grey,
              ),
              child: Center(child: Text("${widget.id}",style: TextStyle(
                color: Colors.black,
                fontSize: 20
              ),)),
            ),
          ),
          widget.initialItem == 0
              ? Container()
              : Positioned(
            top: 0,
              left: 0,
              child: GestureDetector(
            onTap: () {
              widget.onCrossSelect(widget.id);
              print("${widget.id}");
            },
                child: Icon(Icons.close,
                color: Colors.black,
                size: 30,),

          ))
        ],
      ),
    );
  }
}

Answer 1

问题在这里定义一个空容器：

widget.initialItem == 0
              ? Container()
              : Positioned(

如果您将其删除并保持所有预期的所有内容，则您没有空间。由于您使用的是wrap窗口小部件，因此空容器还充当了主轴上一个与先前孩子相邻的儿童，由方向给出，在介于两者之间的间距空间。

来自文档：

如果没有足够的空间适合孩子，则包裹会创建新的运行
毗邻横轴中现有儿童。

在您的代码中删除此行，您没有任何空白空间作为UI中的行为。 在这里阅读更多

Answer 2

因此，毕竟使用了颤音工具，我发现问题是一个空容器

widget.initialItem == 0
              ? Container()
              : Positioned()

，因此该容器占整个宽度，所以我只是添加高度= 0，宽度= 0，现在它可以正常工作，直达我的期望

widget.initialItem == 0
                  ? Container(height = 0, width = 0)
                  : Positioned()