JavaFX:在CSS中指折叠和展开的手风琴状态

时间:2019-03-14 00:35:20

标签: java css javafx javafx-8 accordion

希望我每个人都过得很好。

我试图基于css在TiteldPane对象中基于其override func motionBegan(_ motion: UIEvent.EventSubtype, with event: UIEvent?) { let mObs = MotionObservable() mObs.addGyroObserver(observer: {(x: Double, y: Double, z: Double) -> Void in //let summary = Int(abs(x) + abs(y) + abs(z)) //print("Shake Value : \(summary)") //mObs.clearObservers() //Do you thing }) //self.collectionView.reloadData() } } import Foundation import CoreMotion let Fps60 = 0.016 class MotionObservable { let motionManager: CMMotionManager let updateInterval: Double = Fps60 var gyroObservers = [(Double, Double, Double) -> Void]() var accelerometerObservers = [(Double, Double, Double) -> Void]() // MARK: Public interface init() { motionManager = CMMotionManager() initMotionEvents() } func addGyroObserver(observer: @escaping (Double, Double, Double) -> Void) { gyroObservers.append(observer) } func addAccelerometerObserver(observer: @escaping (Double, Double, Double) -> Void) { accelerometerObservers.append(observer) } func clearObservers() { gyroObservers.removeAll() accelerometerObservers.removeAll() } // MARK: Internal methods private func notifyGyroObservers(x: Double, y: Double, z: Double) { for observer in gyroObservers { observer(x, y, z) } } private func notifyAccelerometerObservers(x: Double, y: Double, z: Double) { for observer in accelerometerObservers { observer(x, y, z) } } private func roundDouble(value: Double) -> Double { return round(1000 * value)/100 } private func initMotionEvents() { if motionManager.isGyroAvailable || motionManager.isAccelerometerAvailable { motionManager.deviceMotionUpdateInterval = updateInterval; motionManager.startDeviceMotionUpdates() } // Gyro if motionManager.isGyroAvailable { motionManager.gyroUpdateInterval = updateInterval motionManager.startGyroUpdates(to: OperationQueue.current!, withHandler: { (gyroData: CMGyroData?, NSError) -> Void in let rotation = gyroData!.rotationRate let x = self.roundDouble(value: rotation.x) let y = self.roundDouble(value: rotation.y) let z = self.roundDouble(value: rotation.z) self.notifyGyroObservers(x: x, y: y, z: z) if (NSError != nil){ print("\(String(describing: NSError))") } }) } else { print("No Gyro Available") } // Accelerometer if motionManager.isAccelerometerAvailable { motionManager.accelerometerUpdateInterval = updateInterval motionManager.startAccelerometerUpdates(to: OperationQueue.current!) { (accelerometerData: CMAccelerometerData?, NSError) -> Void in if let acceleration = accelerometerData?.acceleration { let x = self.roundDouble(value: acceleration.x) let y = self.roundDouble(value: acceleration.y) let z = self.roundDouble(value: acceleration.z) self.notifyAccelerometerObservers(x: x, y: y, z: z) } if(NSError != nil) { print("\(String(describing: NSError))") } } } else { print("No Accelerometer Available") } } } collapsed伪类属性控制箭头的旋转。我正在使用javafx8。如果查看文档here,您会发现expandedexpanded伪类在那里。

下面是我认为应该起作用的一个最小示例。 通用main->

collapsed

下面的css可以像您期望的那样在主体上工作->

package application;

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Accordion;
import javafx.scene.control.Label;
import javafx.scene.control.TitledPane;


public class Main extends Application 
{
    @Override
    public void start(Stage primaryStage) 
    {
        Accordion accordion = new Accordion
        (
                new TitledPane("TitledPane #1", new Label("Content #1"))
        );
        primaryStage.setScene(new Scene(accordion, 600, 400));
        primaryStage.setTitle("Test");
        primaryStage.show();
    }
}

但是如果我想根据箭头是否折叠来影响箭头的旋转,我希望能够编写如下内容->

.accordion .title > .arrow-button
{
    -fx-rotate: -45;   
}

任何人都可以向我解释为什么这行不通并显示应如何正确执行吗?在我尝试将其应用到的项目中,我没有对旋转进行动画处理,但是我想知道这是否会影响事物。

非常感谢您抽出宝贵的时间为我提供帮助。

编辑:为我要具体实现的内容添加细节。我希望箭头在折叠状态下指向下方,而在扩展状态下则指向上方。

1 个答案:

答案 0 :(得分:1)

在弄乱了更多内容之后,我发现了一种hack,可以让您在折叠时将箭头指向下方,在展开时将箭头指向上方。但是,当TitledPane处于动画状态(或至少看起来很糟糕)时,它将无法正常工作。

import javafx.beans.binding.Bindings;
import javafx.scene.control.TitledPane;
import javafx.scene.layout.Region;
import javafx.scene.transform.Rotate;

public static void pointArrowUp(TitledPane pane) {
    Region arrow = (Region) pane.lookup(".arrow");

    Rotate rotate = new Rotate();
    rotate.pivotXProperty().bind(arrow.widthProperty().divide(2.0));
    rotate.pivotYProperty().bind(arrow.heightProperty().divide(2.0));
    rotate.angleProperty().bind(
            Bindings.when(pane.expandedProperty())
                    .then(-180.0)
                    .otherwise(90.0)
    );

    arrow.getTransforms().add(rotate);
    pane.setAnimated(false);
}

my answer to a previous question of yours一样,以上要求TitledPane必须在使用之前显示在Window中;也就是说,除非您使用自定义皮肤。

我尝试仅调用arrow.rotateProperty().unbind()然后在CSS中设置旋转度,但是由于任何原因,我都无法使其看起来正确。


通常的警告:这是一个“ hack”,它依赖于TitledPane的内部实现及其外观,在将来的发行版中可能会发生变化。更改JavaFX版本时要小心。我只在JavaFX 11.0.2上尝试了上述方法。