flutter - Flutter 中 2 个容器之间不需要的空间

标签 flutter dart

Unwanted space between 2 containers 我想删除文本小部件和 ListView (轮播 slider )之间的额外空间。这两个小部件都嵌入在容器小部件中。我没有在这两个小部件之间添加任何 SizedBox 或 Spacer 。我不知道为什么会出现这个额外的空间! 这是示例代码 -

 class _DashBoardState extends State<DashBoard> {
   @override
  Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
     children: [
       SizedBox(
         height: 50,
       ),
        Container(
         child: Text(
           'First Text Box',
           style: TextStyle(
             fontSize: 22,
           ),
         ),
       ),
       Container(
         height: 220,
        child: ListView(
          children: <Widget>[
            CarouselSlider(
              height: 180.0,
              enlargeCenterPage: true,
              autoPlay: true,
              aspectRatio: 16 / 9,
              autoPlayCurve: Curves.fastOutSlowIn,
              enableInfiniteScroll: true,
              autoPlayAnimationDuration: Duration(milliseconds: 800),
              viewportFraction: 0.8,
              items: [
                Container(
                  margin: EdgeInsets.all(5.0),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10.0),
                    image: DecorationImage(
                      image: NetworkImage(
                          "https://images.pexels.com/photos/2116475/pexels-photo-2116475.jpeg? 
     auto=compress&cs=tinysrgb&dpr=2&w=500"),
                      fit: BoxFit.cover,
                    ),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        'Usable Flower for Health',
                        style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 18.0,
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(15.0),
                        child: Text(
                          'Lorem Ipsum is simply dummy text use for printing and type script',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 15.0,
                          ),
                          textAlign: TextAlign.center,
                                         ],
            ),
           ],
         ),
         )
         ] ,
        ),
       );
     }
    }

最佳答案

我认为额外的空间来自于 ListView 的默认填充。 来自文档here :

“默认情况下,ListView 将自动填充列表的可滚动末端,以避免 MediaQuery 的填充指示的部分障碍。要避免这种行为,请使用零填充属性覆盖。”

添加:

padding: EdgeInsets.all(0)

在您的 ListView 小部件中将其设置为 0。

我用你的代码示例尝试过,它正确地删除了多余的空间。

关于flutter - Flutter 中 2 个容器之间不需要的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64769792/

相关文章:

dart - CORS 与 Dart,如何让它发挥作用?

macos - Dart 编辑器和 SDK(解压下载后)通常安装/移动到的文件夹是什么?

php - 格式异常 : Unexpected end of input (at character 1)

flutter - 长按EditableText Widget时不显示文本选择工具栏选项

android - java.lang.NullPointerException : Attempt to invoke virtual method 'float android.view.InputDevice$MotionRange.getMin()' 异常

Flutter:如何处理具有空值的图像?

firebase - 未处理的异常:NoSuchMethodError:在空上调用了 'findAncestorStateOfType'方法

android - 检查现有社交媒体帐户的智能手机

Flutter:多行文本小部件上的多余空间

dart - 如何启用与 Canvas 后面的可见组件的 ui 交互?