特定项目在ListView.builder中无法正确显示

时间:2020-07-09 13:37:37

标签: flutter

ListView issue

我想在ListView.builder中使特定项目更大。我已经用Transform.scale做到了。但是,如图所示,突出显示的项目的右侧位于列表的以下项目下方。我不明白为什么。

这是我目前尝试的内容:

class DpeGesRank extends StatelessWidget {
  final bool isDpe;
  final int selectedRank;
  DpeGesRank({@required this.isDpe, @required this.selectedRank});

  List<Color> dpeColors = [
    Color(0xff0CDB9D),
    Color(0xff61F127),
    Color(0xffCAFA05),
    Color(0xffF9DD18),
    Color(0xffFDAD00),
    Color(0xffFC7130),
    Color(0xffD94654)
  ];

  List<Color> gesColors = [
    Color(0xffFDEAFE),
    Color(0xffFFDEFD),
    Color(0xffF9BEFD),
    Color(0xffFB7EFF),
    Color(0xffF652FC),
    Color(0xffE428F4),
    Color(0xffB415B9)
  ];
  
  List<String> ranks = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 40.0,
      child: ListView.builder(
        shrinkWrap: true,
        itemCount: dpeColors.length,
        physics: NeverScrollableScrollPhysics(),
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) {

          if (index == selectedRank) {
            return Transform.scale(
              scale: 1.3,
              child: Container(
                width: 40,
                height: 40,
                child: Center(
                  child: Text(
                    ranks[index],
                    style: TextStyle(
                        color: index == 6 ? Colors.white : Colors.black,
                        fontSize: 24.0,
                        fontWeight: FontWeight.w700
                    ),
                  ),
                ),
                decoration: BoxDecoration(
                    color: isDpe ? dpeColors[index] : gesColors[index],
                    border:Border.all(
                        width: 2.5,
                        color: Colors.white
                    ),
                    borderRadius: BorderRadius.all(Radius.circular(20.0))
                ),
              ),
            );
          }

          return Container(
            width: 35,
            height: 35, //index == selectedRank ? 35 : 30,
            child: Center(
              child: Text(
                ranks[index],
                style: TextStyle(
                  color: index == 6 ? Colors.white : Colors.black,
                  fontSize: 24.0,
                  fontWeight: FontWeight.w700
                ),
              ),
            ),
            decoration: BoxDecoration(
              color: isDpe ? dpeColors[index] : gesColors[index],
              borderRadius: BorderRadius.only(
                  topLeft: index == 0 ? Radius.circular(5.0) : Radius.circular(0.0),
                  bottomLeft: index == 0 ? Radius.circular(5.0) : Radius.circular(0.0),
                  topRight: index == 6 ? Radius.circular(5.0) : Radius.circular(0.0),
                  bottomRight: index == 6 ? Radius.circular(5.0) : Radius.circular(0.0),
              )
            ),
          );
        },
      ),
    );
  }
}

0 个答案:

没有答案