Question

我正在为我的应用制作一个抽屉，它在列小部件中有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'),
            ],
          ),
        ]),
      )
    ],
  ),
)

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

Answer 1

图像或堆栈中一定有东西

另一个示例让我们尝试

return Scaffold(
      appBar: new AppBar(
        title: new Text("Drawer"),
      ),
      drawer: Drawer(
        child: Column(
          children: <Widget>[
            Container(
              color: Colors.yellow,
              height: MediaQuery.of(context).size.height * 0.30,
              width: double.infinity,
              child: new Container(
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage("./images/drawerbackground.jpg"), fit: BoxFit.fill)),
                child: new Align(
                  alignment: Alignment.bottomLeft,
                  child: new Padding (
                    padding: EdgeInsets.only(left: 20.0, bottom: 10.0),
                    child: Text(
                      "globals.username",
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ),
            ),
            Container(
              height: MediaQuery.of(context).size.height * 0.70,
              width: double.infinity,
              decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage("./images/uni.jpg"), fit: BoxFit.fill),
                gradient: LinearGradient(
                  colors: [Colors.redAccent, Colors.white],
                  begin: Alignment.bottomCenter,
                  end: Alignment.topCenter,

                ),
              ),
              child: 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'),
                ],
              ),
            )
          ],
        ),
      ),
      body: Container(
        child:  Text('Add Moka'),
        ),
    );

Answer 2

问题很可能是您的顶部小部件的图像设置为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
),

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

2 个答案: