我如何在flutter堆栈小部件中给予堆栈中相对于其他子元素百分比高度

pkln4tw6 于 2023-02-09 发布在 Flutter

关注(0)|答案(3)|浏览(141)

这是我代码

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%，宽度与上方小部件相同
有什么办法能做到吗？先谢谢你

flutter

来源：https://stackoverflow.com/questions/75369803/how-can-i-give-percentage-height-in-stack-with-respect-to-other-children-in-flut

3条答案

按热度按时间

pkwftd7m1#

您可以使用FractionallySizedBox。

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

赞(0）回复(0）举报 2023-02-09

eiee3dmh2#

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

赞(0）回复(0）举报 2023-02-09

wljmcqd83#

您可以将第一个容器的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,
                ),
              ),
            ],
          )
        ],
      ),

赞(0）回复(0）举报 2023-02-09

我来回答

我如何在flutter堆栈小部件中给予堆栈中相对于其他子元素百分比高度

3条答案

相关问题

热门标签

最新问答