时间戳

首页 > 解决方案 > 保存在 mysql 中的带有 \n 和 unicode 文字的文本在显示时不起作用

flutter - 保存在 mysql 中的带有 \n 和 unicode 文字的文本在显示时不起作用

问题描述

我在 mysql 中存储了一个带有 \n 和 unicode 文字（如 \u2022）的文本字符串，然后在 Flutter 上使用 http api 调用检索它。使用 Text 小部件显示它时，这些转义符号不会按预期显示。当我直接传递字符串时，它可以工作。谁能帮帮我？

child: Column(
    children: <Widget>[
    Text(prompt.prompt_body, //This variable is from http call which does not work
        textAlign: TextAlign.left,
        style:TextStyle(
            color: Colors.black,
            fontSize: 13,
            fontWeight: FontWeight.bold,
            fontStyle: FontStyle.italic

        )),
    Divider(),
    Text("You live in a room in college which you share with another student.However, there are many problems with this arrangement and you find it very difficult to work.\n\nWrite a letter to the accommodation officer at the college. In the letter,\n\n   \u2022 describe the situation\n   \u2022 explain your problems and why it is difficult to work\n   \u2022 say what kind of accommodation you would prefer",  //this part works
        textAlign: TextAlign.left,
        style:TextStyle(
            color: Colors.black,
            fontSize: 13,
            fontWeight: FontWeight.bold,
            fontStyle: FontStyle.italic

        ))
    ],
  ),

模拟器截图

为了响应 Gunter 的询问，我在 api 调用中添加了以下代码：

     class PromptModel {
     int id;
     String prompt_body;
     String prompt_image;

      PromptModel(this.id, this.prompt_body, this.prompt_image);

       PromptModel.fromJson(Map<String, dynamic> parsedJson) {
      id = parsedJson['id'];
      prompt_body = parsedJson['prompt_body'];
       prompt_image = parsedJson['prompt_image'];
    }
    }

  ....

 class PromptListPageState extends State<PromptListPage> {
  int counter = 0;
  List<PromptModel> prompts = [];

  void fetchImage() async {
    counter++;
    var response =
    await get('http://10.0.2.2:8080/TestPrompt');
    var promptModel = PromptModel.fromJson(json.decode(response.body));

    setState(() {
      prompts.add(promptModel);
    });
  }

以下是api调用的响应：

{"id":1,"prompt_body":"You live in a room in college which you share with another student.However, there are many problems with this arrangement and you find it very difficult to work.\\n\\nWrite a letter to the accommodation officer at the college. In the letter,\\n\\n   \\u2022 describe the situation\\n   \\u2022 explain your problems and why it is difficult to work\\n   \\u2022 say what kind of accommodation you would prefer","prompt_image":"http://10.0.2.2:8080/test.jpg"}

标签： flutter

解决方案

我通过使用 TextFormField 从颤振中输入字符串解决了这个问题。直接在数据库端插入文本很棘手。代码如下：

Widget build(context) {
    return MaterialApp(
      home: Scaffold(
        body: Form(
          key: formKey,
          child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                TextFormField(
                  controller: myController,
                  maxLines: 5,
                  validator: (val) =>
                      (val == null || val.isEmpty) ? "请输入商品名称" : null,
                  decoration: const InputDecoration(
                    //icon: Icon(Icons.person),
                    hintText: 'add the prompt here：',
                    labelText: 'Prompt content',
                    border: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.teal)),
                  ),
                  onSaved: (val) => this.content = val,
                ),
                new Container(
                  margin: const EdgeInsets.only(top: 10.0),
                  child: new RaisedButton(
                    onPressed: _save,
                    child: new Text('Save'),
                  ),
                )
              ]),
        ),
        appBar: AppBar(
          title: Text('Add Essay Prompt'),
        ),
      ),
    );
  }
}

推荐阅读