IonTabButton 不捕获 onClick 事件的问题

问题描述

我正在使用带有 react 的 ionic 5 css 库。

与 IonButtons 相比，我喜欢 IonTabButtons 的样式，因为 IonTabButton 允许在 Icon 下放置文本。在屏幕截图中，我显示了所有图标都显示为选项卡按钮，但 Home 除外，它的样式为 IonButton。

我喜欢 IonTabButton 的外观，但它不运行 onclick 函数（没有控制台语句）。

我的问题会更容易/更好/可能吗 a) 将 onClick 功能添加到 iontab 或 b) 使 IonButton 以与 IonTabButton 对图标和按钮下方的所有文本相同的方式显示。

如果是选项 b)，您知道在哪里可以找到 IonButton 和 IonTabButton 的默认 css 属性以查看它们的不同之处/使两者看起来更容易做到。

class MyPlugin : FlutterPlugin,ActivityAware {
  private var activity: FlutterActivity? = null
  private var binaryMessenger: BinaryMessenger? = null

  override fun onAttachedToEngine(@NonNull FlutterPluginBinding: FlutterPlugin.FlutterPluginBinding) {
    binaryMessenger = FlutterPluginBinding.binaryMessenger
  }

  override fun onDetachedFromEngine(@NonNull binding: FlutterPlugin.FlutterPluginBinding) {
    Log.d("DART/NATIVE","onDetachedFromEngine")
    channel?.setMethodCallHandler(null)
  }

  override fun onAttachedToActivity(binding: ActivityPluginBinding) {
    Log.d("DART/NATIVE","onAttachedToActivity")
    activity = binding.activity as FlutterActivity
    //here we have access to activity
    //also make sure to setMethodCallHandler here
    channel.setMethodCallHandler { call,result ->
        //our code
    }
  }

  //rest of the methods
}

解决方法

这是我能做的最好的。我将 IonTabButton 切换到 IonButton 并尝试以相同的方式对其进行样式设置。我不得不添加以下css：

.transparent{
    background-color: #0000;
}
.big-text{
    font-size: 150%;
}
.fill{
    width: 100%;
    height: 100%;
}

我添加了以下类：

interface ButtonInterface{
    icon: any;
    label: string;
    callback(): any;
}

const Button = ({icon,label,callback}:ButtonInterface)=>{
    return (
    <IonItem lines="none">
        <IonButton
           fill='clear'
           onClick={callback}
           color="dark"
           className="fill"
        >
        <IonList className="transparent">
            <IonIcon
               className="big-text"
               icon={icon}
            />
            <IonLabel>{label}</IonLabel>
        </IonList>
        </IonButton>
    </IonItem>
    );
}

那么这就是你的 html 的样子：

<IonPage>
    <IonContent>
        <IonGrid>
            <IonRow>
                <IonCol size='6'>
                    <Button icon={home} label="Home" callback={handleHomeClick} />
                </IonCol>
                <IonCol size='6'>
                    <Button icon={walk} label="Jog" callback={handleHomeClick} />
                </IonCol>
            </IonRow>
            <IonRow>
                <IonCol size='6'>
                    <Button icon={cog} label="Settings" callback={handleHomeClick} />
                </IonCol>
                <IonCol size='6'>
                    <Button icon={help} label="Help" callback={handleHomeClick} />
                </IonCol>
            </IonRow>
            <IonRow>
                <IonCol size='6'>
                    <Button icon={power} label="Power" callback={handleHomeClick} />
                </IonCol>
            </IonRow>
        </IonGrid>
    </IonContent>
</IonPage>