Flutter中列内的容器之间不需要的间距
Posted
技术标签:
【中文标题】Flutter中列内的容器之间不需要的间距【英文标题】:Unwanted spacing between Containers inside Column in Flutter 【发布时间】:2021-09-29 16:02:34 【问题描述】:我有一个列小部件,里面有两个容器小部件。两个容器小部件都有两个列表视图构建器。第一个列表视图构建器水平交叉,第二个垂直滚动。我面临的问题是带有垂直列表视图构建器的第二个容器。两个容器之间有很多不需要的空间。我没有在它们之间添加任何边距或间距。所以我不知道这个空间是从哪里来的。
代码如下所示:此小部件包含垂直列表,其中包含水平列表
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 中的外观
【问题讨论】:
找出这个空间来自哪里的一种方法:如果你打开 Flutter DevTools,你可以启用调试绘制。这将显示 2 个视图中的哪一个导致了这个空间 我在容器中添加了一种颜色来显示间距的来源。我也添加了代码和图像 你可以试试这个重构的代码并告诉我:gist.github.com/omishah/adfac5389f697cfe9d31367a8b6a13ce gist.github.com/omishah/adfac5389f697cfe9d31367a8b6a13ce - 试过这个,仍然得到相同的结果 【参考方案1】:向您的列表视图构建器添加零填充。在 ios 平台中有默认填充,但在 android 平台中没有。
ListView.builder(
padding: EdgeInsets.zero,
physics: ClampingScrollPhysics(),
shrinkWrap: true,
///your code
【讨论】:
哇!非常感谢!很长一段时间以来,我一直在努力解决这个问题。这立即解决了问题。【参考方案2】:您是否尝试将它们包装在 Expanded 或 Flexible 小部件上?在容器上
【讨论】:
是的,当我用 Expanded 小部件替换容器时,我收到一个错误,指出渲染框未布置 I/flutter (10149):引发另一个异常:RenderBox 未布置:RenderRepaintBoundary #3bd63 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE I/flutter (10149):引发另一个异常:RenderBox 未布置:RenderRepaintBoundary#fb0af NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE以上是关于Flutter中列内的容器之间不需要的间距的主要内容,如果未能解决你的问题,请参考以下文章