英文:
Flutter: How to add button under list view without error with scroll
问题
我想知道如何在“列表视图”下添加一个按钮，并通过按钮将其添加到该列表视图中，而不会出现错误，并通过创建“可滚动列表视图”来实现。
我希望这样做是因为当从按钮添加到列表视图时，列表视图在屏幕上出现错误。
这是一个错误：
════════ Exception caught by rendering library ═════════════════════════════════
在布局期间引发了以下断言：
底部溢出了47像素的RenderFlex。
相关的导致错误的小部件是
Column
alert_list_screen.dart:39
您可以使用VS Code通知中的“检查小部件”按钮来检查此小部件。
溢出的RenderFlex具有Axis.vertical的方向。
溢出的RenderFlex的边缘已在渲染中用黄色和黑色条纹图案标记。这通常是由于内容太大而无法适应RenderFlex的自然大小。
考虑应用一个flex因子（例如使用Expanded小部件）来强制RenderFlex的子项适应可用空间，而不是根据其自然大小调整大小。
这被视为错误条件，因为它指示存在无法看到的内容。如果内容确实比可用空间大，请在将其放入flex之前使用ClipRect小部件对其进行裁剪，或者使用可滚动容器而不是Flex，例如ListView。
问题中特定的RenderFlex是：RenderFlex#50fae relayoutBoundary=up6 OVERFLOWING
══════════════════════════════════════════════════════════════════════════════
我的代码（屏幕和可重复使用的小部件）
注意：我使用了Cubit，newDepot列表是存储数据的地方
var depot = DepotDatabaseCubit.get(context).newDepotList;
Expanded(
child: Container(
child: depotBuilder(
depot: depot,
),
),
),
Container(
child: elevatedButton(
name: '添加新仓库',
onPressed: () {
....
},
),
),
elevatedButton是一个普通的可重复使用小部件，用于显示普通按钮，但我只是更改了子小部件以添加按钮的标签。
depotBuilder小部件
此小部件接受数据并通过ListView将其呈现到屏幕上。
Widget depotBuilder({required List<Map> depot}) {
return ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (context, index) => depotItem(
context: context,
model: depot[index],
),
itemCount: depot.length,
);
}
depotItem是列表视图的项目，运行应用程序时，您将为列表视图添加新项目。
Widget depotItem({
required Map model,
required BuildContext context,
}) {
return Padding(
padding: const EdgeInsets.all(5),
child: Container(
height: 56,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
containerBoxShadow(),
],
borderRadius: BorderRadius.circular(8),
),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
textBaseline: TextBaseline.alphabetic,
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Text(
...
),
),
],
),
),
),
);
}
希望这些信息对你有帮助。如果你有任何问题，请随时提出。
英文:
I want to know how to add a button under the list view and add to this list view by button
without an error
and this by making a scrollable list view
<br>
<br>
I want this because when adding to the list view from the button the list view gets an error on the screen
<br>
this an error
════════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 47 pixels on the bottom.
The relevant error-causing widget was
Column
alert_list_screen.dart:39
You can inspect this widget using the 'Inspect Widget' button in the VS Code notification.
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.
The specific RenderFlex in question is: RenderFlex#50fae relayoutBoundary=up6 OVERFLOWING
════════════════════════════════════════════════════════════════════════════════
<br>
my code (screen & reusable widget)
<br>
NOTE I use cubit and the newDepot list is a place for storing data in
var depot = DepotDatabaseCubit.get(context).newDepotList;
Expanded(
child: Container(
child: depotBuilder(
depot: depot,
),
),
),
Container(
child: elevatedButton(
name: 'Add new depot',
onPressed: () {
....
},
),
),
the elevatedButton is a normal reusable widget to see the normal button but I just change the child widget to a name to add a label to the button
<br>
the depotBuilder widget
this widget takes data and presentation to the screen by list view
Widget depotBuilder({required List<Map> depot}) {
return ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (context, index) => depotItem(
context: context,
model: depot[index],
),
itemCount: depot.length,
);
}
<br>
the depotItem is the item of the list view when running the app you will add the new item for the list view <br>
Widget depotItem({
required Map model,
required BuildContext context,
}) {
return Padding(
padding: const EdgeInsets.all(5),
child: Container(
height: 56,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
containerBoxShadow(),
],
borderRadius: BorderRadius.circular(8),
),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
textBaseline: TextBaseline.alphabetic,
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Text(
...
),
),
],
),
),
),
);
}
答案1
得分: 1
你可以尝试使用以下方式创建扩展列表视图和按钮。
Scaffold(
body: Center(
child: Column(
children: [
Expanded(
flex: 8,
child: ListView.builder(
itemCount: 20,
itemBuilder: (context, index) {
return const Card(
child: ListTile(
title: Text("Title"),
subtitle: Text("Subtitle"),
),
);
},
),
),
Expanded(
flex: 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: () {},
child: Center(child: Text("Add new item")),
),
),
)
],
),
),
);
<details>
<summary>英文:</summary>
You can try using Expanded listview and button like below.
[![sample is below][1]][1]
Scaffold(
body: Center(
child: Column(
children: [
Expanded(
flex: 8,
child: ListView.builder(
itemCount: 20,
itemBuilder: (context, index) {
return const Card(
child: ListTile(
title: Text("Title"),
subtitle: Text("Subtitle"),
),
);
},
),
),
Expanded(
flex: 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: () {},
child: Center(child: Text("Add new item")),
),
),
)
],
),
),
);
[1]: https://i.stack.imgur.com/2oeKN.png
</details>
# 答案2
**得分**: 1
你可以在Column内部使用SingleChildScrollView()，例如：
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:[
SingleChildScrollView(),
ElevatedButton(),
]
)
<details>
<summary>英文:</summary>
You can use a SingleChildScrollView() inside a Column, for example:
Colum(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:[
SingleChildScrollView(),
ElevatedButton(),
]
)
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论