Flutter - 滚动列表视图时如何获得圆角边框？答案

【问题标题】：Flutter - How to get Rounded border when scrolling listview?Flutter - 滚动列表视图时如何获得圆角边框？
【发布时间】：2020-05-29 23:33:20
【问题描述】：

我在列底部有带有筹码的列表视图。

在从列表视图开始的第一张图片中，它是圆形的，但最后它显示为矩形。

当滚动 listview 芯片 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 flutter dart android-listview android-chips

【解决方案1】：

Container 中的BoxDecoration 只会将圆角显示为视觉特征。如果您想将内容实际剪辑到那些圆角内而不会溢出，您希望将容器包围在 ClipRRect 中。

ClipRRect(
  borderRadius: BorderRadius.circular(12.0),
  child: Container(
    padding: EdgeInsets.only(top: 16.0),
    width: MediaQuery.of(context).size.width,
    height: 100,
    decoration: BoxDecoration(color: Colors.white),
    child: Column(
      ...
    ),
  ),
),

【讨论】：