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

时间:2019-02-17 08:41:38

标签: flutter

我在MySQL中存储一个带有\ n和Unicode文字的文本字符串,如\ u2022,然后在flutter中使用http api调用进行检索。当使用“文本”窗口小部件显示它时,这些转义的符号不会按预期显示。当我直接传递字符串时,它可以工作。有人可以帮我吗?

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

        ))
    ],
  ),

emulator screenshot

为响应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"}

1 个答案:

答案 0 :(得分:0)

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

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'),
        ),
      ),
    );
  }
}