flutter - 如何防止多列和 ListView 出现此溢出错误？

Question

我正在创建一个消息页面，管理员可以在其中向应用程序上的用户发送消息。
我使用了一个 Container，一个带有 Row 的 Column 和一个 AnimatedContainer 作为 child ，AnimatedContainer 还包含一个带有两个 Listviews 和一个 TextField 的 Column。
该行包含一个 Icons.add 按钮，每当按下该按钮时，_isExpanded =! _is展开。当 _isExpanded 时，AnimatedContainer 高度设置为 400，当 !_isExpanded 时，高度为 0。我在 flutter 方面的弱点是处理间距、边界等。每当我展开我的 AnimatedContainer 时，我都会得到一个底部溢出错误，这并不奇怪，因为动画容器内的我的列(及其子项)具有固定宽度。我尝试用 Expanded 包装很多小部件，但似乎找不到正确的组合。错误不断出现。谁能帮我解决这个问题？

Container(
                  width: double.infinity,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(12),
                      color: Colors.grey[300]),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Column(
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text('Ontvangers',
                                style: TextStyle(
                                    fontFamily: 'Lato',
                                    fontSize: 16,
                                    fontWeight: FontWeight.w700)),
                            IconButton(
                              icon: Icon(Icons.add),
                              onPressed: () {
                                setState(() {
                                  _isExpanded = !_isExpanded;
                                });
                              },
                            )
                          ],
                        ),
                        AnimatedContainer(
                          duration: Duration(milliseconds: 300),
                          curve: Curves.fastOutSlowIn,
                          height: _isExpanded ? 400 : 0,
                          child: Column(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              TextField(
                                decoration: InputDecoration(
                                    prefixIcon: Icon(Icons.search),
                                    hintText: 'Zoeken'),
                                controller: _searchController,
                              ),
                              AnimatedContainer(
                                duration: Duration(milliseconds: 300),
                                curve: Curves.fastOutSlowIn,
                                height: selectedUsers.isNotEmpty ? 50 : 0,
                                child: ListView.builder(
                                    scrollDirection: Axis.horizontal,
                                    itemCount: selectedUsers.length,
                                    itemBuilder: (ctx, index) {
                                      return Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.start,
                                        mainAxisSize: MainAxisSize.min,
                                        children: [
                                          InputChip(
                                              labelStyle: TextStyle(
                                                  color: Colors.black),
                                              label: Text(filteredUsers[index]
                                                      ['firstName'] +
                                                  ' ' +
                                                  filteredUsers[index]
                                                      ['lastName'])),
                                          SizedBox(
                                            width: 5,
                                          )
                                        ],
                                      );
                                    }),
                              ),
                              ListView.builder(
                                  shrinkWrap: true,
                                  itemCount: filteredUsers.length,
                                  itemBuilder: (ctx, index) {
                                    return Column(
                                      children: [
                                        ListTile(
                                            tileColor: Colors.white,
                                            title: Text(filteredUsers[index]
                                                    ['firstName'] +
                                                ' ' +
                                                filteredUsers[index]
                                                    ['lastName']),
                                            subtitle: Text(
                                                filteredUsers[index]['email']),
                                            trailing: IconButton(
                                              icon: selectedUsers.contains(
                                                      filteredUsers[index]
                                                          ['uid'])
                                                  ? Icon(
                                                      Icons.check_box_rounded)
                                                  : Icon(Icons
                                                      .check_box_outline_blank_rounded),
                                              onPressed: () {
                                                if (selectedUsers.contains(
                                                    filteredUsers[index]
                                                        ['uid'])) {
                                                  selectedUsers.remove(
                                                      filteredUsers[index]
                                                          ['uid']);
                                                  setState(() {});
                                                } else {
                                                  selectedUsers.add(
                                                    filteredUsers[index]['uid'],
                                                  );
                                                  setState(() {});
                                                }
                                              },
                                            )),
                                        SizedBox(
                                          height: 8,
                                        )
                                      ],
                                    );
                                  }),
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                )

Answer 1

尝试将您的主要小部件或脚手架包裹在 SafeArea 内.这可能会解决您的问题。