Flutter Autocomplete组件建议窗口圆角设置问题求助

要给Autocomplete的建议窗口添加圆角，核心是调整optionsViewBuilder中的Material和Container组件配置，以下是两种可行方案：

方案一：通过Material的shape属性设置圆角 #

直接给包裹建议列表的Material组件设置shape属性，同时将背景色移到Material上（避免Container和Material的颜色冲突）：

optionsViewBuilder: (context, onSelected, options) {
  return Align(
    alignment: Alignment.topLeft,
    child: Material(
      // 设置圆角形状
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      color: greyMed,
      child: ConstrainedBox(
        constraints: const BoxConstraints(maxHeight: 300, maxWidth: 235),
        child: ListView.builder(
          padding: EdgeInsets.zero,
          itemBuilder: (context, index) {
            final option = options.elementAt(index);
            return ListTile(
              title: Text(
                option.toString(),
                style: TextStyle(color: textWhite),
              ),
              onTap: () {
                onSelected(option);
              },
            );
          },
          itemCount: options.length,
        ),
      ),
    ),
  );
},

方案二：开启Material裁剪，保留Container的圆角 #

如果需要保留Container的颜色和布局设置，给Material添加clipBehavior属性开启裁剪，让Container的圆角生效：

optionsViewBuilder: (context, onSelected, options) {
  return Align(
    alignment: Alignment.topLeft,
    child: Material(
      // 开启裁剪，让Container的圆角生效
      clipBehavior: Clip.antiAlias,
      child: Container(
        color: greyMed,
        borderRadius: BorderRadius.circular(10),
        child: ConstrainedBox(
          constraints: const BoxConstraints(maxHeight: 300, maxWidth: 235),
          child: ListView.builder(
            padding: EdgeInsets.zero,
            itemBuilder: (context, index) {
              final option = options.elementAt(index);
              return ListTile(
                title: Text(
                  option.toString(),
                  style: TextStyle(color: textWhite),
                ),
                onTap: () {
                  onSelected(option);
                },
              );
            },
            itemCount: options.length,
          ),
        ),
      ),
    ),
  );
},

补充优化 #

如果觉得建议列表的内容和圆角边缘间距不协调，可以给ListTile添加contentPadding调整：

ListTile(
  contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  // 其他属性...
)

内容的提问来源于stack exchange，提问作者Kamil Żebrowski