ListView 内的小部件后面出现一个黑框

Question

我正在制作一个带有阴影的 ProjectTile 小部件，但是当我使用 ListView.builder 显示该小部件时，容纳 boxshadow 的容器扩展到 ProjectTile 的宽度之外，因此黑框显示为见下图。

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)),
                      ),
                    ]),
              ],
            ),
          ),
        )
      ],
    ));

ProjectTile 小部件父小部件。

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

容器

A container first surrounds the child with padding (inflated by any borders present in the decoration) and then applies additional constraints to the padded extent (incorporating the width and height as constraints, if either is non-null). The container is then surrounded by additional empty space described from the margin.

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

so a blackbox appears as seen

鉴于容器占用了所有可用的 space，并且您将 color:Colors.black 作为容器颜色属性，那么它会按照指示工作。

如果你不想给它一个宽度但取最大值 space ，你可以尝试展开

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

ListView 内的小部件后面出现一个黑框

A blackbox appears behind widget inside ListView

flutter

web

alignment

flutter-listview