Listener 布局是一种特殊类型的布局，用于响应用户输入更新屏幕上显示的数据。当您希望创建动态和交互式屏幕，并根据用户操作改变其外观和行为时，这非常有用。

在此示例中，我们有一个屏幕，其中包含两个数字输入字段，这些数字需要相互减去。我们可以通过使用监听器布局来实现这一点。

要创建监听器布局，您需要在终端中运行以下 artisan 命令：

php artisan orchid:listener SubtractListener

运行上述命令将会在 app/Orchid/Layouts 目录中创建一个名为 SubtractListener 的新类。创建后，您可以在 layouts 方法中添加所需的字段，如下所示：

namespace App\Orchid\Layouts;

use Illuminate\Http\Request;
use Orchid\Screen\Fields\Input;
use Orchid\Screen\Layouts\Listener;
use Orchid\Screen\Repository;
use Orchid\Support\Facades\Layout;

class SubtractListener extends Listener
{
    /**
     * 需要监听其值的字段名称列表。
     *
     * @var string[]
     */
    protected $targets = [];

    /**
     * @return Layout[]
     */
    protected function layouts(): array
    {
        return [
            Layout::rows([
                Input::make('minuend')
                    ->title('第一个参数')
                    ->type('number'),

                Input::make('subtrahend')
                    ->title('第二个参数')
                    ->type('number'),
            ]),
        ];
    }
    
    /**
     * @param \Orchid\Screen\Repository $repository
     * @param \Illuminate\Http\Request  $request
     *
     * @return \Orchid\Screen\Repository
     */
    public function handle(Repository $repository, Request $request): Repository
    {
        return $repository;
    }
}

在这里，targets 属性包含需要在更改时执行操作的字段名称。在我们的示例中，名称为 minuend 和 subtrahend 的字段被视为目标：

/**
 * 需要监听其值的字段名称列表。
 *
 * @var string[]
 */
protected $targets = [
    'minuend',
    'subtrahend',
];

注意。多选字段如 <select name="users[]"> 需要通过在目标值后加上一个点来表示它们是一个数组，例如 "users."

现在是 handle 方法，它负责处理目标字段。该方法会在目标字段的值发生变化时自动调用。它接受两个参数 – $repository 代表屏幕上所有字段的当前状态，而 $request 代表屏幕的新状态。

namespace App\Orchid\Layouts;

use Illuminate\Http\Request;
use Orchid\Screen\Fields\Input;
use Orchid\Screen\Layouts\Listener;
use Orchid\Screen\Repository;
use Orchid\Support\Facades\Layout;

class SubtractListener extends Listener
{
    /**
     * 需要监听其值的字段名称列表。
     *
     * @var string[]
     */
    protected $targets = [
        'minuend',
        'subtrahend',
    ];

    /**
     * @return Layout[]
     */
    protected function layouts(): iterable
    {
        return [
            Layout::rows([
                Input::make('minuend')
                    ->title('第一个参数')
                    ->type('number'),

                Input::make('subtrahend')
                    ->title('第二个参数')
                    ->type('number'),

                Input::make('result')
                    ->readonly()
                    ->canSee($this->query->has('result')),
            ]),
        ];
    }

    /**
     * @param \Orchid\Screen\Repository $repository
     * @param \Illuminate\Http\Request  $request
     *
     * @return \Orchid\Screen\Repository
     */
    public function handle(Repository $repository, Request $request): Repository
    {
        $minuend = $request->input('minuend');
        $subtrahend = $request->input('subtrahend');

        return $repository
            ->set('minuend', $minuend)
            ->set('subtrahend', $subtrahend)
            ->set('result', $minuend - $subtrahend);
    }
}

以上代码展示了 SubtractListener 类的更新版本。为了处理目标字段中的值，我们解构了 $request 对象，将字段 minuend 和 subtrahend 中的值赋给同名变量。然后，我们使用这些值以及两个值相减的结果更新 $repository 对象，结果反映在 result 字段中。