时间戳

首页 > 解决方案 > 为什么两个容器之间有一条白线颤动

flutter - 为什么两个容器之间有一条白线颤动

问题描述

我正在为我的应用程序制作一个抽屉，它在列小部件中有 2 个容器，这些容器之间似乎有一条线破坏了外观，我已经为上部容器尝试过这个

  margin: EdgeInsets.only(bottom: 0),
  padding: EdgeInsets.only(bottom: 0),

这对于下部容器

  margin: EdgeInsets.only(top: 0),
  padding: EdgeInsets.only(top: 0),

这条线仍然存在。如何删除该行，任何帮助将不胜感激。这是抽屉的代码：

Drawer(
  child: Column(
    children: <Widget>[
      Container(
        height: globals.heightofdevice * 0.30,
        width: double.infinity,
        margin: EdgeInsets.only(bottom: 0),
        padding: EdgeInsets.only(bottom: 0),
        child: Stack(
          children: <Widget>[
            Image.asset(
              './images/drawerbackground.jpg',
              fit: BoxFit.fitWidth,
            ),
            Positioned(
              left: globals.widthofdevice * 0.07,
              bottom: 20,
              child: Text(
                globals.username,
                style: GoogleFonts.quicksand(
                  textStyle: TextStyle(
                    // fontWeight: FontWeight.w700,
                    fontSize: 32,
                    color: Colors.white,
                  ),
                ),
              ),
            )
          ],
        ),
      ),
      Container(
        height: globals.heightofdevice * 0.70,
        margin: EdgeInsets.only(top: 0),
        padding: EdgeInsets.only(top: 0),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [Colors.redAccent, Colors.white],
            begin: Alignment.bottomCenter,
            end: Alignment.topCenter,
          ),
        ),
        child: Stack(children: <Widget>[
          Image.asset(
            './images/uni.jpg',
            fit: BoxFit.cover,
            width: double.infinity,
          ),
          Column(
            children: <Widget>[
              listTileBuilder(Icons.history, 'History'),
              listTileBuilder(Icons.info_outline, 'About the app'),
              listTileBuilder(Icons.account_circle, 'Logout'),
              listTileBuilder(Icons.exit_to_app, 'Exit'),
            ],
          ),
        ]),
      )
    ],
  ),
)

您可以清楚地看到这张图片中的问题

在此处输入图像描述

标签： flutterflutter-layout

解决方案

问题很可能是您的顶部小部件的图像设置为fit: BoxFit.fitWidth,. 由于它试图完全填充水平平面，因此一旦完成它就会停止并且不会垂直缩放以覆盖剩余的空白区域。

要使用颜色填充图像未占用的容器空间，使其不是白线，您可以尝试以下操作（将背景更改为黑色）：

Container(
        height: globals.heightofdevice * 0.30,
        width: double.infinity,
        margin: EdgeInsets.only(bottom: 0),
        padding: EdgeInsets.only(bottom: 0),
        colors: Colors.black, // Added color
        child: Stack(
          ...
        ),
      ),

或者尝试使图像占用容器的所有可用空间，无论图像的大小和纵横比如何，您都可以更改 BoxFit 以填充：

Image.asset(
  './images/drawerbackground.jpg',
  fit: BoxFit.fill,  // BoxFit fill
),

推荐阅读