Laravel Filament v3仪表盘布局问题求助：组件占比调整

你的布局不符合预期，核心问题是Widget的列宽配置错误，以及没有正确控制内部统计卡片的分布逻辑。Filament仪表盘采用12列网格系统，需要明确Widget本身的行占比，再控制内部卡片的拆分比例。

错误点说明 #

1. KeyMetricsOverview的columnSpan设置错误：你将整个Widget的宽度设为6列（屏幕的50%），导致两个统计卡片在这50%的宽度内平分，最终各占屏幕的25%，而非预期的50%。
2. MetricsOverview的columnSpan设置错误：你将Widget宽度设为3列（屏幕的25%），三个统计卡片在这狭小空间内挤压，完全达不到33%的屏幕占比要求。

修复后的代码 #

1. KeyMetricsOverview（第一行两个各占50%） #

<?php

namespace App\Filament\Widgets;

use Filament\Widgets\StatsOverviewWidget as BaseWidget;
use Filament\Widgets\StatsOverviewWidget\Stat;

class KeyMetricsOverview extends BaseWidget
{
    protected static ?int $sort = 1;

    // 让Widget占满整个行（12列）
    protected int | string | array $columnSpan = [
        'md' => 12,
    ];

    // 内部卡片分为2列，自动平分12列宽度（各占6列=50%屏幕）
    protected int | string | array $columns = 2;

    protected function getStats(): array
    {
        return [
            Stat::make('客户流失率', '5.45%')
                ->description('上升57.5%')
                ->descriptionIcon('heroicon-m-arrow-trending-up')
                ->color('danger'),
            Stat::make('平均客户生命周期', '18.333个月')
                ->description('下降36.51%')
                ->descriptionIcon('heroicon-m-arrow-trending-down')
                ->color('danger'),
        ];
    }
}

2. MetricsOverview（第二行三个各占33%） #

<?php

namespace App\Filament\Widgets;

use Filament\Widgets\StatsOverviewWidget as BaseWidget;
use Filament\Widgets\StatsOverviewWidget\Stat;

class MetricsOverview extends BaseWidget
{
    protected static ?int $sort = 2;

    // 让Widget占满整个行（12列）
    protected int | string | array $columnSpan = [
        'md' => 12,
    ];

    // 内部卡片分为3列，自动平分12列宽度（各占4列≈33%屏幕）
    protected int | string | array $columns = 3;

    protected function getStats(): array
    {
        return [
            Stat::make('总客户数', '100')
                ->description('上升69.52%')
                ->descriptionIcon('heroicon-m-arrow-trending-up')
                ->color('danger'),
            Stat::make('域名数', '130')
                ->description('下降36.51%')
                ->descriptionIcon('heroicon-m-arrow-trending-down')
                ->color('danger'),
            Stat::make('监控数', '130')
                ->description('下降36.51%')
                ->descriptionIcon('heroicon-m-arrow-trending-down')
                ->color('danger'),
        ];
    }
}

图表组件配置（最后一行各占50%） #

如果你的图表是独立Widget，只需设置columnSpan为6（占12列的一半），并调整sort值确保排在最后：

<?php

namespace App\Filament\Widgets;

use Filament\Widgets\ChartWidget;

class YourChartWidget extends ChartWidget
{
    protected static ?int $sort = 3;

    protected int | string | array $columnSpan = [
        'md' => 6,
    ];

    // 图表逻辑...
    protected function getData(): array
    {
        return [
            // 你的数据配置
        ];
    }

    protected function getType(): string
    {
        return 'line'; // 或其他图表类型
    }
}

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