Ionic ion-picker：将取消与确认按钮移至底部的实现求助

先修正你的Picker配置代码 #

你的配置里有两个小错误，先改过来：

• console.log(') 缺了闭合引号
• columns 结构不对，每个列得包含name和options属性

修正后的完整代码示例：

const picker = await this.pickerController.create({
  buttons: [
    {
      text: 'Cancel',
      role: 'cancel',
      handler: () => {
        console.log('取消选择');
      },
    },
    {
      text: 'Select',
      role: 'heading',
      cssClass: 'pickerHeading',
    },
    {
      text: 'Confirm',
      handler: (columns: any) => {
        console.log('确认选择:', columns);
      },
      role: 'submit',
    },
  ],
  columns: [
    {
      name: 'gender',
      options: [
        { text: 'Female', value: 'female' },
        { text: 'Male', value: 'male' },
      ],
    },
  ],
  cssClass: 'custom-bottom-buttons-picker', // 加个自定义类，方便改样式
});

await picker.present();

然后加全局CSS样式 #

在global.scss里写以下样式，把按钮栏挪到底部：

.custom-bottom-buttons-picker {
  .picker-header {
    flex-direction: column;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ion-color-step-150, #d7d8da);
    
    // 先把顶部默认的按钮容器藏起来
    .picker-buttons {
      display: none;
    }
  }

  // 给底部加个分隔线和按钮容器的占位
  &::after {
    content: '';
    display: flex;
    justify-content: space-between;
    padding: 12px var(--ion-padding);
    border-top: 1px solid var(--ion-color-step-150, #d7d8da);
  }

  // 把取消和确认按钮定位到底部左右两侧
  .picker-button[role="cancel"],
  .picker-button[role="submit"] {
    position: absolute;
    bottom: 12px;
    z-index: 1;
  }

  .picker-button[role="cancel"] {
    left: var(--ion-padding);
  }

  .picker-button[role="submit"] {
    right: var(--ion-padding);
  }

  // 让标题居中加粗
  .pickerHeading {
    font-weight: 600;
    font-size: 16px;
    color: var(--ion-color-primary, #3880ff);
  }
}

效果说明 #

• 顶部只留居中的"Select"标题
• 取消按钮在底部左边，确认按钮在底部右边
• 样式用了Ionic的主题变量，浅色/深色模式都能适配

如果用的是Ionic v6及以上版本，直接用就行；要是更低版本，可能需要微调几个选择器，比如.picker-header的结构可能有点不一样。

内容的提问来源于stack exchange，提问作者Sunny