大家好～
今天來實作如何用 Flex Message 回覆訊息吧！
那麼關於 Flex Message 樣式設計，
官方推出的 FLEX MESSAGE SIMULATOR 就是個還滿好用的工具啦～

可以在右側的畫面選擇 Component 並指定 Property，
畫面左側則可以預覽目前的設計。
另外右上角的四個按鈕：

用來新增 Carousel 或 Bubble。

點開後可以看到官方提供的範例模板，
共有12種：

只要將加入官方的 Flex Message Sim 帳號加入好友，
就可以用該功能傳送設計好的模板到 Line 電腦端或手機端，
看看實際的效果如何～

可以將設計好的模板轉成 JSON。

Flex Message 回傳訊息的部分，
將用下面這個範例模板為例。

Flex Message

use LINE\LINEBot\HTTPClient\CurlHTTPClient;
use LINE\LINEBot;
use LINE\LINEBot\MessageBuilder\FlexMessageBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ContainerBuilder\CarouselContainerBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ContainerBuilder\BubbleContainerBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\BoxComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\FillerComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\IconComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\ImageComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\TextComponentBuilder;

public function reply(Request $request)
{
    $httpClient = new CurlHTTPClient(env('LINE_BOT_CHANNEL_ACCESS_TOKEN'));
    $bot = new LINEBot($httpClient, ['channelSecret' => env('LINE_BOT_CHANNEL_SECRET')]);
    $replyToken = $request['events'][0]['replyToken'];

    $imageComponent = new ImageComponentBuilder('https://scdn.line-apps.com/n/channel_devcenter/img/flexsnapshot/clip/clip1.jpg');
    $imageComponent->setSize('full')
        ->setAspectMode('cover')
        ->setAspectRatio('2:3')
        ->setGravity('top');

    $titleText = new TextComponentBuilder("Brown's T-shirts");
    $titleText->setSize('xl')
        ->setColor('#ffffff')
        ->setWeight('bold');
    $titleTextBox = new BoxComponentBuilder('vertical', [$titleText]);

    $priceText = new TextComponentBuilder('¥75,000');
    $priceText->setColor('#ffffffcc')
        ->setDecoration('line-through')
        ->setGravity('bottom')
        ->setFlex(0)
        ->setSize('sm');
    $discountText = new TextComponentBuilder('¥35,800');
    $discountText->setColor('#ebebeb')
        ->setSize('sm')
        ->setFlex(0);
    $priceTextBox = new BoxComponentBuilder('baseline', [$discountText, $priceText]);
    $priceTextBox->setSpacing('lg');

    $fillerComponentBuilder = new FillerComponentBuilder();
    $cartIcon = new IconComponentBuilder('https://scdn.line-apps.com/n/channel_devcenter/img/flexsnapshot/clip/clip14.png');
    $cartText = new TextComponentBuilder('Add to cart');
    $cartText->setColor('#ffffff')
        ->setFlex(0)
        ->setOffsetTop('-2px');
    $cartButtonTextBox = new BoxComponentBuilder(
        'baseline',
        [
            $fillerComponentBuilder,
            $cartIcon,
            $cartText,
            $fillerComponentBuilder
        ]
    );
    $cartButtonTextBox->setSpacing('sm');
    $buttonBox = new BoxComponentBuilder(
        'vertical',
        [
            $fillerComponentBuilder,
            $cartButtonTextBox,
            $fillerComponentBuilder
        ]
    );
    $buttonBox->setBorderWidth('1px')
        ->setCornerRadius('4px')
        ->setSpacing('sm')
        ->setBorderColor('#ffffff')
        ->setMargin('xxl')
        ->setHeight('40px');

    $contentBox = new BoxComponentBuilder(
        'vertical',
        [
            $titleTextBox,
            $priceTextBox,
            $buttonBox
        ]
    );
    $contentBox->setPosition('absolute')
        ->setOffsetBottom('0px')
        ->setOffsetStart('0px')
        ->setOffsetEnd('0px')
        ->setBackgroundColor('#03303Acc')
        ->setPaddingAll('20px')
        ->setPaddingTop('20px');

    $boxComponentBuilder = new BoxComponentBuilder(
        'vertical',
        [
            $imageComponent,
            $contentBox
        ],
    );
    $boxComponentBuilder->setPaddingAll('0px');

    $bubbleContainerBuilder = new BubbleContainerBuilder(
        'ltr',
        null,
        null,
        $boxComponentBuilder,
        null,
        null,
        null
    );

    $carouselContainerBuilder = new CarouselContainerBuilder([
        $bubbleContainerBuilder,
        $bubbleContainerBuilder,
        $bubbleContainerBuilder,
        $bubbleContainerBuilder,
        $bubbleContainerBuilder
    ]);

    $flexMessageBuilder = new FlexMessageBuilder(
        'Alternative text',
        $carouselContainerBuilder
    );

    $bot->replyMessage($replyToken, $flexMessageBuilder);
}

成果預覽：

Flex Message 雖然需要自己設計模板，
跟 Template message 比起來使用方法複雜很多，
但可以有更彈性的模板設計，
而且 Flex Message 在手機端與電腦端都能正常顯示訊息。

那麼我們已經實作過每種 MessageBuilder 啦～
今天就先這樣吧，
大家明天見！
若文章有任何問題，
還請大家不吝賜教！