TextField及富文本框的用法

最新推荐文章于 2025-11-14 15:26:39 发布

原创最新推荐文章于 2025-11-14 15:26:39 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#TextField及富文本框 #flutter 富文本框

flutter 专栏收录该内容

220 篇文章

订阅专栏

本文介绍如何使用Flutter中的Extended Text Field插件实现富文本输入功能。通过具体的代码示例，展示了如何创建一个可以输入多行文本的组件，并通过按钮获取当前输入的内容。

在flutter中，要用到富文本框，可以用extended_text_field第三方插件

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController controller = new TextEditingController();
  String result;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("richText"),
      ),
      body: Container(
        child: Column(
          children: [
            ExtendedTextField(
              controller: controller,
              maxLines: 3,
            ),
            SizedBox(height: 10),
            TextButton(
              onPressed: () {
                setState(() {
                  result = controller.text;
                });
              },
              child: Text("click"),
            ),
            Text("$result"),
          ],
        ),
      ),
    );
  }
}

注意一定要用Scaffold。