[Flutter] 플러터 Text 텍스트 위젯(TextSpan, RichText Text.rich )

텍스트를 그리는 Text() 와 RichText() 있고 그래픽적 효과를 적용할 수 있는 TextStyle()

글자, 문장을 모아 문단을 구성할 수 있게 해주는 TextSpan()이 있다.

Text()

//defulat
Text('A Text widget'); 

//option
Text('bold text', 
	textAlign: TextAlign.center, 
    style: TextStyle(fontWeight: FontWeight.bold), 
)

 

• textAlign : 문자를 수평적으로 배치하는 방법. (center, left, right, end, ...)
• textDirection : 문자 배치 방향. (ltr:왼쪽에서 오른쪽으로, rtl:오른쪽에서 왼쪽으로, ...)
• style : 문자의 스타일. (Bold, Italics, color, size, ...)

 

RichText()

// DefaultTextStyle 을 기본으로 명시적 적용.
RichText(
  text: TextSpan(
    text: 'Hello ',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' world!'),
    ],
  ),
),
// style 이 생략되어 DefaultTextStyle 이 적용.
Text.rich(
  TextSpan(
    text: '12. text rich ',
    children: <TextSpan> [
      TextSpan(text: ' with '),
      TextSpan(text: 'TextStyle.'),
    ],
  ),
)

 

• 여러개의 다른 스타일을 가진 문자를 화면에 그린다. Text.rich 와 마찬가지로 TextSpan 을 사용한다.다른점은 Text.rich 는 DefaultTextStyle 을 기본적으로 적용 하지만, RichText는 그렇지 않으므로 기본 스타일을 명시해야 한다.

 

TextSpan()

• 특정 길이의 문자(text)를 한 단위로 하여 스타일(style)을 적용하는데 사용하고 chidren<>[] , 자식 위젯 TextSpan 리스트를 가질 수 있으며, 모두 한 문단으로 화면에 그려진다. text 와 children 둘 다 값을 가지면, 자식 위젯 리스트 중 첫번째 위치의 text 값으로 으로 적용된다.

//Example
TextSpan(
  text: 'Hello world!',
  style: TextStyle(color: Colors.black),
)


const Text.rich(
  TextSpan(
    text: 'Hello', // default text style
    children: <TextSpan>[
      TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic)),
      TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),
    ],
  ),
)

• TextSpan 의 text 인 'Hello' 는 기본 문자 스타일,
• 자식 위젯 TextSpan 인 ' beautiful ' 은 italic 스타일,
• 두번째 자식 위젯 TextSpan 인 'world' 는 bold 스타일로
• 최종적으로 모든 TextSpan 이 이어져 만들어진 문단이 화면에 그려진다.

 

Text.rich()

• 하나의 스타일 보다 더 다양한 스타일의 문자들을 적용하여 문단을 만들 고자 할 때 쓸 수 있는 constructor 다. (TextRich 와 기능이 비슷하다.)
• TextSpan 을 이용해 스타일을 적용하고자 하는 만큼의 문자, 문자열 지정할 수 있고, 여러개의 TextSpan 을 가질 수 있어 다양한 스타일이 존재하는 문단을 만들 수 있다.
• style 을 지정하지 않으면 Text class 가 기본적으로 적용하는 DefaultTextStyle 을 적용하게 된다.

 

텍스트의 일부에만 밑줄을 표시하려면 Text.rich() 또는 RichText() 위젯을 사용하고 스타일을 추가 할 수있는 문자열을 TextSpan() 으로분리해야한다.

 

 

본문의 참조 iosroid.tistory.com/36