如何给出相对于颤动堆栈小部件中其他子项的堆栈百分比高度

Question

这是我的代码

Scaffold(
        // backgroundColor: Colors.transparent,
        appBar: AppBar(
          backgroundColor: Colors.transparent,
          elevation: 0,
          title: const Text("Live Shows"),
        ),
        body: MasonryGridView.builder(
          physics: const BouncingScrollPhysics(),
          gridDelegate: const SliverSimpleGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
          ),
          mainAxisSpacing: 7,
          crossAxisSpacing: 7,
          itemCount: urs.length,
          itemBuilder: ((context, index) {
            return Container(
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  border: Border.all(
                    color: ColorsItems().color3,
                    width: 1,
                  )),
              child: Stack(children: [
                Positioned(
                    child: ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: CachedNetworkImage(
                    imageUrl: urs[index],
                    imageBuilder: (context, imageProvider) =>
                        Image(image: imageProvider),
                  ),
                )),
//Container 2
                Positioned.fromRelativeRect(
                    rect: RelativeRect.fromLTRB(2, 30, 4, 3),
                    child: Container(
                      color: Colors.black,
                    ))
              ]),
            );
          }),
        ));

我想将容器 2 的高度和宽度设置为上部小部件高度的 30％，并且与上部小部件具有相同的宽度

有什么办法可以做到这一点吗

Answer 1

您可以使用

FractionallySizedBox

.

Positioned.fill(
  child: FractionallySizedBox(
      heightFactor: .3,//your value    
      widthFactor: 1,
      alignment: Alignment.bottomCenter,
      child: Container(
        color: Colors.black,
        child:
      )),
),

Answer 2

FractionallySizedBox(
  widthFactor: 0.7,
  heightFactor: 0.25,
  child: Container(
    color: Colors.amber,
  ),
)

Answer 3

您可以将第一个容器的 Flex 设置为 3，将第二个容器的 Flex 设置为 1，这样您就可以将第二个容器的高度设置为第一个容器高度的 30%，这是一个示例代码

Stack(
        fit: StackFit.expand,
        children: [
          Column(
            children: [
              Expanded(
                flex: 3,
                child: Container(
                  color: Colors.black,
                ),
              ),
              Expanded(
                flex: 1,
                child: Container(
                  color: Colors.green,
                ),
              ),
            ],
          )
        ],
      ),