添加 Infolist 到 Livewire 组件

准备 Livewire 组件

首先，生成新的 Livewire 组件：

php artisan make:livewire ViewProduct

然后，在页面上渲染 Livewire 组件：

@livewire('view-product')

或者，你可以使用整页 Livewire 组件：

use App\Livewire\ViewProduct;
use Illuminate\Support\Facades\Route;

Route::get('products/{product}', ViewProduct::class);

你必须使用 InteractsWithInfolists 和 InteractsWithForms traits，并在你的 Livewire 组件类中实现 HasInfolists 和 HasForms 接口：

use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Infolists\Concerns\InteractsWithInfolists;
use Filament\Infolists\Contracts\HasInfolists;
use Livewire\Component;

class ViewProduct extends Component implements HasForms, HasInfolists
{
    use InteractsWithInfolists;
    use InteractsWithForms;

    // ...
}

添加信息列表

接下来，在 Livewire 组件中添加一个方法，该方法接收一个 $infolist 对象作为参数，对其修改并返回：

use Filament\Infolists\Infolist;

public function productInfolist(Infolist $infolist): Infolist
{
    return $infolist
        ->record($this->product)
        ->schema([
            // ...
        ]);
}

最后，在 Livewire 组件视图中渲染该信息列表：

{{ $this->productInfolist }}

传送数据到信息列表

你可以用两种方式将数据传入到信息列表：

可以传入 Eloquent 模型实例到信息列表的 record() 方法中，将所有的模型属性和关自动映射到消息列表 Schema 中的 Entry：

use Filament\Infolists\Components\TextEntry;
use Filament\Infolists\Infolist;

public function productInfolist(Infolist $infolist): Infolist
{
    return $infolist
        ->record($this->product)
        ->schema([
            TextEntry::make('name'),
            TextEntry::make('category.name'),
            // ...
        ]);
}

此外，也可以传送数据数组到信息列表的 state() 方法中，手动将数据映射到信息列表 Schema 中的 Entry：

use Filament\Infolists\Components\TextEntry;
use Filament\Infolists\Infolist;

public function productInfolist(Infolist $infolist): Infolist
{
    return $infolist
        ->state([
            'name' => 'MacBook Pro',
            'category' => [
                'name' => 'Laptops',
            ],
            // ...
        ])
        ->schema([
            TextEntry::make('name'),
            TextEntry::make('category.name'),
            // ...
        ]);
}