如何调整小部件的大小以适应列表 Flutter

Question

我有问题。有一个列表和灵活的，它应该根据列表的大小扩展，但现在我的列表正在减少，但没有容器本身。如何使容器适合列表的长度并不断变化而不是静态的？只是如果我从 Flexible 中删除 Container，那么我将得到一个没有背景颜色的列表。

Padding(
        padding: const EdgeInsets.only(left: 24, right: 24),
        child: Column(
          children: [
            const SizedBox(height: 178),
            const BackStepWidget(text: 'Select Language'),
            const SizedBox(height: 30),
            Container(
              width: size.width,
              // height: 65,
              decoration: const BoxDecoration(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(24),
                      topRight: Radius.circular(24)),
                  color: constants.Colors.greyDark),
              child: Padding(
                padding: const EdgeInsets.only(
                    left: 16, right: 16, top: 16, bottom: 13),
                child: Row(
                  children: [
                    Expanded(
                        child: TextFormField(
                      decoration: const InputDecoration(
                          contentPadding: EdgeInsets.all(5),
                          filled: true,
                          fillColor: constants.Colors.greyLight,
                          hintText: 'Search',
                          hintStyle: TextStyle(color: constants.Colors.white),
                          prefixIcon: Icon(
                            Icons.search,
                            color: constants.Colors.white,
                          ),
                          suffixIcon: Icon(Icons.keyboard_voice,
                              color: constants.Colors.white),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.all(Radius.circular(10)),
                          )),
                    )),
                    const SizedBox(width: 14),
                    const Text('Cancel',
                        style: constants.Styles.smallBookTextStyleWhite)
                  ],
                ),
              ),
            ),
            Flexible(
              child: Container(
                width: size.width,
                decoration: const BoxDecoration(
                    borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(24),
                        bottomRight: Radius.circular(24)),
                    color: constants.Colors.greyDark),
                child: Padding(
                  padding: const EdgeInsets.only(left: 16),
                  child: MediaQuery.removePadding(
                    context: context,
                    removeTop: true,
                    child: ListView.separated(
                        separatorBuilder: ((context, index) => Divider(
                            height: 2,
                            color: constants.Colors.white.withOpacity(0.2))),
                        itemCount: language.length,
                        itemBuilder: (context, index) => Padding(
                              padding:
                                  const EdgeInsets.only(top: 9, bottom: 10),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    language[index],
                                    style: constants
                                        .Styles.smallBoldTextStyleWhite,
                                  ),
                                  Text(
                                    language[index],
                                    style: constants
                                        .Styles.smallerBookTextStyleWhite,
                                  ),
                                ],
                              ),
                            )),
                  ),
                ),
              ),
            )
          ],
        ),
      );

Answer 1

您正在容器内使用 ListView.Separated。问题是，ListView 默认有一个 infinite 高度...

继续为您的 ListView 提供 shrinkWrap 属性，如下所示：

ListView.separated(
   shrinkWrap: true,
   (...)
)

这会将 ListView 缩小到只有它的子级组合高度的高度！

祝你好运xx

如何调整小部件的大小以适应列表 Flutter

How to resize a widget to fit a list Flutter

dart

flutter

flutter-layout