我想在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),
)
),
);
},
),
);
}
}