《Flutter 控件大全》第八十一：SelectableText

• 如果你對Flutter還有疑問或者技術方面的疑惑，歡迎加入Flutter交流羣（微信：laomengit）。
• 同時也歡迎關注我的Flutter公衆號【老孟程序員】，公衆號首發Flutter的相關內容。
• Flutter地址：http://laomengit.com 裏面包含160多個組件的詳細用法。

想象一下，應用程序中的文本可以被選中，並可以複製、剪切是不是很酷炫，SelectableText控件就提供了這樣的功能，如下：

SelectableText(
  '老孟，一枚有態度的程序員'
)

選中效果：

設置光標的相關參數，光標默認不顯示，showCursor爲true顯示光標，用法如下：

SelectableText(
  '老孟，一枚有態度的程序員',

  showCursor: true,
  autofocus: true,
  cursorColor: Colors.red,
  cursorRadius: Radius.circular(10),
  cursorWidth: 5,

)

效果如下：

默認情況下選擇的操作有Copy和SelectAll，雖然ToolbarOptions還可以設置cut和paste，但這2個屬性對EditableText組件才起作用，用法如下：

SelectableText(
  '老孟，一枚有態度的程序員',
  toolbarOptions: ToolbarOptions(
    copy: true,
    selectAll: true
  ),
)

我們還可以添加onTap響應單擊手勢，用法如下：

SelectableText(
  '老孟，一枚有態度的程序員',
  onTap:(){}
)

當文字超過文本框的時候，可向下滾動顯示更多的文本，用法如下：

Container(
  height: 100,
  width: 250,
  child: SelectableText(
    '老孟，一枚有態度的程序員。老孟，一枚有態度的程序員。'
    '老孟，一枚有態度的程序員。老孟，一枚有態度的程序員。'
    '老孟，一枚有態度的程序員。老孟，一枚有態度的程序員。'
    '老孟，一枚有態度的程序員。老孟，一枚有態度的程序員。',
    scrollPhysics: ClampingScrollPhysics(),
  ),
)

效果如下：

通過SelectableText.rich命名構造函數可以構建更多樣式的文本，SelectableText.rich的用法和Text.rich或者RichText用法一樣，SelectableText還有一些關於文本樣式的參數，比如style、textAlign等，這些參數的用法和Text一樣，這裏就不在單獨介紹。

查看專欄詳情 立即解鎖全部專欄