【Flutter 소기집】TextSpan에서 for 루프 돌려, ​​사이에 「・」치고 싶을 때

오늘의 주역

Flutter로 같은 행에 다양한 폰트나 스타일을 혼합하는데 편리한 RichText 클래스

이 녀석(RichText)에 표시시키는 복수의 문언을 DB로부터 배열로 취득해, 루프 처리로 Widget을 생성해 건네주려고 하고 있었지만, 조금 집착했으므로 비망록 포함해 소기 소개입니다.

하고 싶었던 일

간단히 말하면,
- 표시하고 싶은 문장이 저장되어 있는 배열을 취득
- 그것을 루프 처리로 RichText 에 건네주어, 묘화 시킨다

이런 이미지입니다⬇︎

각각의 결제 방법에 밑줄을 그어 그 사이에 단락의 「・」를 넣는다. 플러스 현금 지불을 다른 결제 방법과 구별하기 위해 "와 현금 지불"이라는 바람에 "와"를 머리에 붙이고 싶은 느낌이었습니다.

시도한 것

「・」나 「와」를 어느 타이밍에 치면 좋을지는 그 문자열이 몇번째인지 알 필요가 있습니다. 그래서 배열의 값뿐만 아니라 index도 준다 List<T>.generate() 를 사용하자. (그 밖에도 여러가지 쓰는 방법이 있기 때문에, 그것은 또한 어딘가에서 만지고 싶습니다.)

그것을 막상 children의 List에 건네준 결과, 「 List<TextSpan> 왜 건네주지 않아! TextSpan 밖에 나는 받아들이지 않아!」

우우, 하지만 index 사용하고 싶으니까 List.generate()
잘못

final List<String> list = <String>['クレジットカード','交通系ICカード','現金払い'];

@override 
Widget build(BuildContext context){
   return Container(
      child: RichText(
        text: TextSpan(
         children: <TextSpan>[ // <TextSpan>しか受け取らないよ！
            List<InlineSpan>.generate(  // List<TextSpan>なんて渡してくるんじゃないよ！
                list.length,
                (int index){
                  return TextSpan(
                      children: <TextSpan> [
                        if(index != 0 && list[index] != '現金払い')
                          const TextSpan(text:'・'),
                        if(index != 0 && list[index] == '現金払い')
                          const TextSpan(text:'と'),
                        TextSpan(
                          text: list[index],
                          style: const TextStyle(
                            decoration: TextDecoration.underline,
                          ),
                        ),
                      ],
                  );
                },
              ),
            ],
         ),
       ),
    );
  }

결론 : children 속성에 직접 전달!

결론으로서는 children에게 건네준 List<TextSpan> 속에서 기술하는 것이 아니라, 단순히 children에 직접 전달하면 좋았다.

덧붙여서 InlineSpan 라는 것은 TextSpan 의 부모 클래스가 됩니다.

잘 작동

final List<String> list = <String>['クレジットカード','交通系ICカード','現金払い'];

@override 
Widget build(BuildContext context){
   return Container(
      child: RichText(
        text: TextSpan(
         children: List<InlineSpan>.generate( // ⬅︎ ココ！直渡し
            list.length,
            (int index){
               return TextSpan(
                  children: <TextSpan> [
                    if(index != 0 && list[index] != '現金払い')
                      const TextSpan(text:'・'),
                    if(index != 0 && list[index] == '現金払い')
                      const TextSpan(text:'と'),
                    TextSpan(
                      text: list[index],
                      style: const TextStyle(
                        decoration: TextDecoration.underline,
                      ),
                    ),
                  ],
               );
             },
          ),
        ),
       ),
    );
  }

그리고 더 똑똑한 쓰기

이 기사의 오류에 대해 지적해 주셨습니다 @ 호박 챠 감사합니다!
list.first 그리고 배열의 머리의 값인가를 판별할 수 있으므로 원래 index 없어도 이번의 요건은 채울 수 있는 것 같습니다. 그것을 사용하면 List.generate() 로 기술할 필요가 없어지므로, children하하의 List내에서 for문을 돌려, 하고 싶은 것을 달성할 수 있었습니다!

스마트

  final List<String> list = <String>['クレジットカード', '交通系ICカード', '現金払い'];

  @override
  Widget build(BuildContext context) {
    return Container(
      child: RichText(
        text: TextSpan(
          children: <TextSpan>[
            for (String type in list) ...<TextSpan>[
              if (type != list.first && type != '現金払い')
                const TextSpan(text: '・'),
              if (type == list.first && type == '現金払い')
                const TextSpan(text: 'と'),
              TextSpan(
                text: type,
                style: const TextStyle(
                  decoration: TextDecoration.underline,
                ),
              ),
            ],
          ],
        ),
      ),
    );
  }

베리 스마트

참고

h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 56947046 / f ぅ는 r ぉ r ぉ 오 p 와 게 네라 ぃ st ㄴ
h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 61922116 / f ぅ는 r 호 w-와 우세 -는 ゔ ぇ- 푹 r-오 ps