flutter 抖动-列主轴对齐间距在行内不起作用

bd1hkmkf  于 2023-02-05  发布在  Flutter
关注(0)|答案(3)|浏览(131)

日安。我正在尝试构建一个UI,其中的小部件树类似于Row-〉children(Column,List)。问题是我希望我的列与List具有相同的高度。这是不可能的。我在这里包含了截图和我的代码。任何帮助都是值得的

您可以看到左边的列没有占用所有的空间,并且在时间和扩展更多图标之间的空间也不起作用。
我在这里包含了我的代码。

class CollapsibleAgendaList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final SessionListCubit cubit = context.read<SessionListCubit>();

    return ListView.separated(
        itemBuilder: (context, index) {
          return Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                child: GestureDetector(
                  onTap: () {
                    print('Tapped on time section. ');
                  },
                  child: Padding(
                    padding: EdgeInsets.all(8),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text('10:30 Am'),
                        Icon(Icons.expand_more),
                      ],
                    ),
                  ),
                ),
              ),
              Expanded(
                child: ListView.separated(
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    itemBuilder: (context, index) {
                      print("item  builder.");
                      return CollapsibleAgendaItem(
                          session: cubit.state.sessions[index], isLiked: true);
                    },
                    separatorBuilder: (context, index) {
                      return const Divider(
                        color: Colors.grey,
                      );
                    },
                    itemCount: 2),
              ),
            ],
          );
        },
        separatorBuilder: (context, index) {
          return const Divider(
            color: Colors.grey,
          );
        },
        itemCount: 4);
  }
}

编辑:我将以我的例子来解释这个问题的原因。也许它会在将来帮助到某些人。当Flutter构建child时,它会从parent中请求所需的宽度/高度。但是由于我小时候使用过ListView,它并不立即知道height。因此,Column只获取了它所需要的height。但是,我尝试为ListView提供一个height来解决这个问题。但是,在我的情况下,我不能在运行时确定height,相反,我使用了一个Column,就像接受的答案一样,它解决了我的问题。在未来,如果有人找到了ListView的解决方案,请在这里发表评论。

gpnt7bae

gpnt7bae1#

你可以在Row的顶部添加IntrinsicHeight(昂贵的小部件),也可以在不使用可滚动物理控件的情况下,用Column替换listVIEw

return ListView.separated(
    itemBuilder: (context, index) {
      return IntrinsicHeight(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ColoredBox(
              color: Colors.red,
              child: GestureDetector(
                onTap: () {
                  print('Tapped on time section. ');
                },
                child: Padding(
                  padding: EdgeInsets.all(8),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text('10:30 Am'),
                      Icon(Icons.expand_more),
                    ],
                  ),
                ),
              ),
            ),
            Column(
              children: List.generate(2, (index) {
                return Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Container(
                      height: 200,
                    ),
                    const Divider(
                      color: Colors.grey,
                    ),
                  ],
                );
              }),
            ),
          ],
        ),
      );
    },
    separatorBuilder: (context, index) {
      return const Divider(
        color: Colors.grey,
      );
    },
    itemCount: 4);
yhived7q

yhived7q2#

在列内使用mainAxisSize:MainAxisSize.max

2izufjch

2izufjch3#

要使Row的内容充满整个高度,需要在Row上设置crossAxisAlignment: CrossAxisAlignment.stretch,
以下是关于横轴对齐与主轴对齐的文档。
在横轴上拉伸子级。(行从上到下,列从左到右)

相关问题