JavaFX中如何正确调整TilePane与ScrollPane宽度，实现三列卡片无水平滚动

嘿，我来帮你搞定这个问题！你想要三列卡片刚好填满ScrollPane的宽度、完全不需要横向滚动，核心是要让TilePane的宽度精准贴合ScrollPane的可视区域，同时每个卡片的宽度计算要准确。

先看看你现有代码里的小问题：你直接把卡片宽度绑定到TilePane的width，但TilePane本身的宽度并没有和ScrollPane的可视区关联起来，这就导致卡片宽度的计算基准不对，很容易出现横向滚动或者宽度适配不完美的情况。

给你几个关键的修改步骤：

1. 让TilePane完全适配ScrollPane的可视区域
   把TilePane的宽度绑定到ScrollPane的viewportBoundsProperty，这样TilePane会自动跟着ScrollPane的可视宽度变化，不会超出范围：

   tilePane.prefWidthProperty().bind(this.viewportBoundsProperty().map(bounds -> bounds.getWidth()));
   

2. 精准计算卡片宽度
   三列卡片之间有2个水平间隙，所以计算的时候要减去这部分的总宽度，用(列数-1)来计算间隙数量会更通用（以后改列数直接改数字就行）：

   tableTileCard.prefWidthProperty().bind(
       tilePane.widthProperty()
           .subtract(tilePane.getHgap() * (3 - 1)) // 三列对应2个间隙
           .divide(3)
   );
   

3. 确保ScrollPane的配置正确
   你已经设置了setFitToWidth(true)，这个没问题，它会让TilePane始终填满ScrollPane的宽度，不会留空。

修改后的完整代码如下：

package com.sam.ui.tableManagment;

import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Orientation;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.TilePane;

public class TableTileCardsContainer extends ScrollPane {

    ObservableList<String> tables;
    TilePane tilePane;
    TableTileCard tableTileCard;

    public TableTileCardsContainer() {
        tables = FXCollections.observableArrayList("1", "2", "3","1", "2", "3");

        tilePane = new TilePane();
        tilePane.setHgap(5);
        tilePane.setVgap(5);
        tilePane.setOrientation(Orientation.HORIZONTAL);

        // 关键修改1：让TilePane宽度绑定到ScrollPane的可视区域宽度
        tilePane.prefWidthProperty().bind(this.viewportBoundsProperty().map(bounds -> bounds.getWidth()));

        this.setFitToWidth(true);

        for (String table : tables) {
            tableTileCard = new TableTileCard(table);
            tableTileCard.setPrefHeight(80);

            // 关键修改2：精准计算卡片宽度
            tableTileCard.prefWidthProperty().bind(
                tilePane.widthProperty()
                    .subtract(tilePane.getHgap() * (3 - 1))
                    .divide(3)
            );

            tilePane.getChildren().add(tableTileCard);
        }

        this.setContent(tilePane);
        this.getStylesheets().add("/css/ProductCardsContainer.css");
    }
}

另外还有个小提醒：如果你的TableTileCard或者TilePane设置了padding、边框这些样式，记得在计算卡片宽度的时候也要把这些额外的宽度减去，不然可能还是会出现滚动或者适配不准的情况哦。

备注：内容来源于stack exchange，提问作者Sam