一个黑框出现在小部件内部列表视图后面

Question

我正在制作一个带有阴影的项目台式小部件，但是当我使用listView.builder显示窗口小部件时，则保留BoxShadow的容器会超出ProjectTile的宽度，因此Blackbox出现为在下图中看到。

ProjectTile窗口小部件项目窗口小部件的整个代码

return Container(
    margin: const EdgeInsets.only(bottom: 25),
    height: 140,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(15),
      color: Colors.black,
      boxShadow: [
        BoxShadow(
          color: Colors.black.withOpacity(.50),
          blurRadius: 4,
          offset: const Offset(0, 4),
        ),
      ],
    ),
    child: Row(
      children: [
        Image.asset(
          "assets/.jpg",
          color: Colors.green,
          width: 240,
        ),
        // Container(
        //   width: 240,
        //   decoration: const BoxDecoration(
        //       borderRadius: BorderRadius.only(
        //           topLeft: Radius.circular(15),
        //           bottomLeft: Radius.circular(15)),
        //       color: Colors.black,
        //       image: DecorationImage(
        //           image: AssetImage("assets/.jpg"))),
        // ),
        SizedBox(
          width: 500,
          child: Container(
            decoration: const BoxDecoration(
                color: Color(0xFF585858),
                borderRadius: BorderRadius.only(
                    topRight: Radius.circular(15),
                    bottomRight: Radius.circular(15))),
            padding: const EdgeInsets.all(10),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text("Project Name",
                            overflow: TextOverflow.ellipsis,
                            style: GoogleFonts.courierPrime(
                              fontSize: 24,
                              color: Colors.white,
                            )),
                        IconButton(
                            onPressed: () {},
                            icon: const Icon(
                              FontAwesomeIcons.bookmark,
                              size: 25,
                              color: Colors.white,
                            )),
                      ],
                    ),
                    const SizedBox(
                      height: 2,
                    ),
                    SizedBox(
                      width: 400,
                      child: Text(
                          "Input an awesome a dfgsdfgsdfg sdfg sdfg sdfg  sdfgsdfg sdfg fsd fnd catchy description for your project here. blah blah blah blah blah blah",
                          overflow: TextOverflow.ellipsis,
                          // softWrap: false,
                          maxLines: 3,
                          textAlign: TextAlign.start,
                          style: GoogleFonts.courierPrime(
                            color: Colors.white,
                            fontSize: 14,
                          )),
                    ),
                  ],
                ),
                Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Container(
                              margin: const EdgeInsets.only(right: 5),
                              width: 20,
                              height: 20,
                              decoration: const BoxDecoration(
                                  shape: BoxShape.circle,
                                  image: DecorationImage(
                                      fit: BoxFit.fill,
                                      image: NetworkImage(
                                          "https://i.imgur.com/BoN9kdC.png")))),
                          Text(
                            "longusername1234",
                            style: GoogleFonts.courierPrime(
                                color: const Color(0xFFC5C5C5)),
                          ),
                        ],
                      ),
                      Text(
                        "10. marts 2021",
                        style: GoogleFonts.courierPrime(
                            color: const Color(0xFFC5C5C5)),
                      ),
                    ]),
              ],
            ),
          ),
        )
      ],
    ));

。

return Expanded(
  child: Container(
    color: const Color(0xFF4B4B4B),
    child: Column(
      children: [
        Container(
          padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 90),
          decoration: BoxDecoration(
            color: const Color(0xFF585858),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.25),
                blurRadius: 4,
                offset: const Offset(0, 4),
              ),
            ],
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              // Search bar
              SizedBox(
                width: 232,
                height: 40,
                child: TextField(
                  textAlignVertical: TextAlignVertical.center,
                  cursorHeight: 24,
                  decoration: const InputDecoration(
                    ...
                  ),
                  style: GoogleFonts.courierPrime(
                    ...
                  ),
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  OutlinedButton.icon(
                    onPressed: () {},
                    icon: const Icon(
                      ...
                    ),
                    label: Text(
                      ...
                    ),
                  ),
                  OutlinedButton.icon(
                    onPressed: () {},
                    icon: const Icon(
                      ...
                    label: Text(
                      ...
                    ),
                  ),
                  OutlinedButton.icon(
                    onPressed: () {},
                    icon: const Icon(
                      ...
                    ),
                    label: Text(
                      ...
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
        Expanded(
          child: ListView.builder(
            padding: const EdgeInsets.all(20),
            itemCount: 15,
            itemBuilder: ((_, __) {
              return const ProjectTile();
            }),
          ),
        ),
      ],
    ),
  ),
);

Answer 1

容器

一个容器首先用填充物（在装饰中存在的任何边界膨胀），然后在填充范围内应用其他约束（如果宽度和高度作为约束，则如果是非零子）。然后，容器被边缘描述的其他空白所包围。

一个容器占用所有可用空间。如果您不希望它占用所有可用空间，您可能希望给它一个宽度。

因此，一个黑框如See

出现

因此，如果容器占用所有可用的空间，并且您将color.black作为您的容器颜色属性，

，并且您的color.black，然后按照指示工作。如果您不想给它一个宽度，但请占用最大空间，
您可以尝试扩展

Row-|
    - Expanded (child, image, flex1
    - Expanded (child, your tile data, flex 3,