Flutter中列内的容器之间不需要的间距

Question

我有一个列小部件，里面有两个容器小部件。两个容器小部件都有两个列表视图构建器。第一个列表视图构建器水平交叉，第二个垂直滚动。我面临的问题是带有垂直列表视图构建器的第二个容器。两个容器之间有很多不需要的空间。我没有在它们之间添加任何边距或间距。所以我不知道这个空间是从哪里来的。

代码如下所示：此小部件包含垂直列表，其中包含水平列表

class _HomeDataState extends State<HomeData> {
  @override
  Widget build(BuildContext context) {
    //final userData = Provider.of<UserData>(context);
    return SingleChildScrollView(
      child: Column(
        children: [
          VerticalList(),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Column(
      //mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Container(
          margin: EdgeInsets.only(top: 140),
          color: Colors.transparent,
          height: 188,
          child: HorizontalList(),
        ),
        Container(
          //color: Colors.amber,
          // margin: EdgeInsets.only(top: 0),
          child: ListView.builder(
            physics: ClampingScrollPhysics(),
            shrinkWrap: true,
            scrollDirection: Axis.vertical,
            itemCount: 10,
            itemBuilder: (context, int index) {
              return VerticalTile();
            },
          ),
        ),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView.builder(
        physics: ClampingScrollPhysics(),
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        itemCount: 10,
        itemBuilder: (context, int index) {
          bool first = index == 0;
          return HorizontalTile(first: first);
        },
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 465,
      margin: EdgeInsets.fromLTRB(30, 0, 30, 24),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: const Color(0xffF9F9ED),
        boxShadow: [
          BoxShadow(
            color: const Color(0xff131200).withOpacity(0.20),
            spreadRadius: 1,
            blurRadius: 8,
            offset: Offset(3, 3), // changes position of shadow
          ),
        ],
      ),
      child: Text('Container'),
    );
  }
}

class HorizontalTile extends StatelessWidget {
  final bool first;
  //const HorizontalTile({Key? key}) : super(key: key);
  HorizontalTile({this.first});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 168,
      width: 122,
      margin: first
          ? EdgeInsets.fromLTRB(15, 23, 0, 23)
          : EdgeInsets.fromLTRB(10, 23, 0, 23),
      decoration: BoxDecoration(
        color: const Color(0xffF9F9ED),
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            color: const Color(0xff131200).withOpacity(0.20),
            spreadRadius: 1,
            blurRadius: 8,
            offset: Offset(3, 3), // changes position of shadow
          ),
        ],
      ),
      child: Text('Container'),
    );
  }
}

我的目标是删除这个间距，因为我希望能够在它们之间定义自己的间距。

[已编辑]

我已为具有此间距的容器添加了一种颜色。但是，此容器没有添加间距。

更新代码：

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

  @override
  Widget build(BuildContext context) {
    return Column(
      //mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Container(
          margin: EdgeInsets.only(top: 140),
          color: Colors.transparent,
          height: 188,
          child: HorizontalList(),
        ),
        Container(
          color: Colors.amber, //Added the color here
          // margin: EdgeInsets.only(top: 0),
          child: ListView.builder(
            physics: ClampingScrollPhysics(),
            shrinkWrap: true,
            scrollDirection: Axis.vertical,
            itemCount: 10,
            itemBuilder: (context, int index) {
              return VerticalTile();
            },
          ),
        ),
      ],
    );
  }

这是小部件在 devtools 中的外观

Answer 1

向您的列表视图构建器添加零填充。在 IoS 平台中有默认填充，但在 Android 平台中没有。

   ListView.builder(
        
        padding: EdgeInsets.zero,
        physics: ClampingScrollPhysics(),
        shrinkWrap: true,
        ///your code

Answer 2

您是否尝试将它们包装在 Expanded 或 Flexible 小部件上？在容器上