我在列表底部有芯片的列表视图。
从列表视图开始的第一个图像中,它是圆形的,但最后它的显示为矩形。
滚动列表视图时,芯片1天溢出。(第二张图片。)>
我希望双方底部都需要圆形,如何实现?在此先感谢。
我的代码
Container( padding: EdgeInsets.only( top: 16.0, ), width: MediaQuery.of(context).size.width, height: 100, decoration: BoxDecoration( borderRadius: BorderRadius.circular(12.0), color: Colors.white), child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text(""), Container( height: 35, decoration: BoxDecoration( borderRadius: BorderRadius.only( bottomLeft: Radius.circular(12.0), bottomRight: Radius.circular(12.0)), color: Theme.of(context).chipTheme.backgroundColor), child: ListView( scrollDirection: Axis.horizontal, children: getChoiceChips(), ), ) ], ), )
芯片功能
getChoiceChips() {
List<Widget> choiceChipList = [];
List<String> choiceString = [
'1 Day',
'1 Week',
'1 Month',
'3 Months',
'1 Year'
];
for (String choice in choiceString) {
choiceChipList.add(Padding(
padding: const EdgeInsets.only(left: 2.0, right: 2.0),
child: ChoiceChip(
label: Text(choice),
selected: choice == selectedChoice,
onSelected: (newSelectedChoice) {
setState(() {
print(selectedChoice);
print(newSelectedChoice);
selectedChoice = choice;
print(selectedChoice);
print(choice);
});
},
),
));
}
return choiceChipList;
}
我在列表底部有芯片的列表视图。从列表视图开始的第一个图像中,它是圆形的,但最后它是矩形的。滚动listview Chip 1 day时...
BoxDecoration
中的Container
仅将圆角显示为视觉特征。如果您想将内容实际剪切到那些圆角内且没有溢出,则需要将容器包围在ClipRRect
中。