小编典典

使容器小部件垂直填充父级

flutter

TL; DR需要容器填充垂直空间,以便可以充当即时监听器。尝试了大多数解决方案,但似乎无济于事。

所以我想做的是使我的容器在保持固定宽度的同时填满垂直空间。第二个是我拥有的,第三个是我要的。想法是使容器透明,并带有手势监听器。如果有人对其他解决方案有更好的主意,请随时提出建议。

Widget build(BuildContext context) {
return new GestureDetector(
  onHorizontalDragUpdate: _move,
  onHorizontalDragEnd: _handleDragEnd,
  child: new Stack(
    children: <Widget>[
      new Positioned.fill(           
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            new Container(
              child: new IconButton(                          
                padding: new EdgeInsets.only(top: 16.0, bottom: 16.0, left: 24.0, right: 24.0),
                icon: new Icon(Icons.warning),
                color: Colors.black12,
                onPressed: () {},
              )
            ),
          ],
        ),
      ),
      new SlideTransition(
        position: new Tween<Offset>(
          begin:  Offset(0.0, 0.0),
          end: const Offset(-0.6, 0.0),
        ).animate(_animation),
        child: new Card(
          child: new Row(
            children: <Widget>[
              new Container(
                width: 20.0,
                height: 20.0,
                color: Colors.amber,
              ),
              new Expanded(
                child: new Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[

                    _getListTile(),
                    _ifStoplineIsToBeShown()
                  ],
                ),
              )
            ],
          )
        ),
      ),
    ],
  )
);

}

考虑到我尝试了许多不同的事情,但似乎没有任何效果,我非常确定自己会丢失一些东西。

我还上传了图片与绘画调试这里

PS。我知道我已将高度设置为固定值,但这是显示容器的唯一方法。


阅读 204

收藏
2020-08-13

共1个答案

小编典典

技巧是将一个IntrinsicHeight小部件和一个RowcrossAxisAlignment: CrossAxisAlignment.stretch

这将迫使Row的子级垂直扩展,但是Row将占用尽可能少的垂直空间。

Card(
  child: IntrinsicHeight(
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Container(
          width: 20.0,
          color: Colors.amber,
        ),
        // Expanded(...)
      ],
    ),
  )
)
2020-08-13