颤振,如何更改列表视图项目的大小?

时间:2020-04-07 07:58:22

标签: flutter flutter-layout flutter-animation

我有行(水平)列表视图,是文本

代码就是这样

return ListView(
  children: <Widget>[
    Padding(
      padding: EdgeInsets.all(0.0),
      child: GestureDetector(
        onTap: () {
          setState(() {
            if (pageNumber != null) {
              pageNum = pageNumber - 1;
              _bigSizeNum = pageNumber - 1;
              _rightIndex = false;
              _rowListContainerWidth =
                  MediaQuery.of(context).size.width * 0.04;
              _rowListContainerHeight =
                  MediaQuery.of(context).size.height * 0.08;
            }
          });
        },
        child: AnimatedContainer(
          duration: Duration(milliseconds: 140),
          width: _rowListContainerWidth,
          height: _rowListContainerHeight,
          margin: _rightIndex
              ? EdgeInsets.only(
                  top: 0,
                )
              : EdgeInsets.only(
                  top: 0,
                  left: MediaQuery.of(context).size.width * 0.04,
                  right: MediaQuery.of(context).size.width * 0.04),
          padding: EdgeInsets.all(12.0),
          decoration: BoxDecoration(
            border: Border.all(
              width: 0.6,
              color: Colors.white70,
            ),
            borderRadius: BorderRadius.all(
              Radius.circular(4),
            ),
            color: Colors.transparent,
          ),
          child: Center(
            child: Text(
              pageNumber.toString(),
              softWrap: false,
              textAlign: TextAlign.center,
              overflow: TextOverflow.ellipsis,
              maxLines: 2,
              style: TextStyle(
                color: Colors.white,
                fontSize: 16.0,
              ),
            ),
          ),
        ),
      ),
    ),
  ],
);

和_rowListContainerWidth大小根本不起作用

因为我猜只有itemExtent决定如何设置宽度大小!

enter image description here

我的温控器解决方案有余,所以看起来更小

但是空间边距太烦人了,我认为这全是因为itemExtent

我希望空格在项目之间具有相同的大小。谢谢

1 个答案:

答案 0 :(得分:0)

仅在左侧设置边距

          margin: _rightIndex
              ? EdgeInsets.only(
                  top: 0,
                )
              : EdgeInsets.only(
                  top: 0,
                  left: MediaQuery.of(context).size.width * 0.04)