如果文本溢出，如何自动换行

Question

你好，我正在制作古兰经应用程序。我正在从json文件中获取数据。我想问一问如何在图片中溢出时创建新行？我尝试了很多东西，但似乎都没有用..有没有办法用字符串变量手动创建新行？请分享您的解决方案..预先感谢：）

import 'dart:convert';

import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts_arabic/fonts.dart';
import 'package:waktusolatimprovised/menu.dart';

class QuranPage extends StatefulWidget {
  final surahDipilih;

  const QuranPage({Key key, this.surahDipilih}) : super(key: key);
  @override
  QuranPageState createState() => QuranPageState();
}

class QuranPageState extends State<QuranPage> {
  List data;

  var text;
  var translate;

  @override
  Widget build(BuildContext context) {
    Future<dynamic> loadJson() async {
      String quranText =
          await DefaultAssetBundle.of(context).loadString("images/quran.json");
      String quranTranslate = await DefaultAssetBundle.of(context)
          .loadString("images/quranterjemahan.json");
      return {text = quranText, translate = quranTranslate};
    }

    return Scaffold(
        appBar: AppBar(
          title: Text("Load local JSON file"),
        ),
        drawer: Durawa(),
        body: Container(
          child: Center(
            // Use future builder and DefaultAssetBundle to load the local JSON file
            child: FutureBuilder(
                future: loadJson(),
                builder: (context, snapshot) {
                  if (text == null && translate == null) {
                    return CircularProgressIndicator();
                  }
                  var quranText = json.decode(text);
                  var quranTranslation = json.decode(translate);
                  // Decode the JSONR

                  double c_width = MediaQuery.of(context).size.width * 0.8;

                  return ListView.builder(
                    // Build the ListView
                    itemBuilder: (BuildContext context, int index) {
                      List text = [
                        quranText['sura'][widget.surahDipilih]['aya'][index]
                            ['_text'],
                        quranTranslation[widget.surahDipilih]['aya'][index]
                            ['@text']
                      ];

                      return Container(
                        child: Row(
                          children: <Widget>[
                            Flexible(
                              child: Column(
                                children: <Widget>[
                                  Container(
                                      child: AutoSizeText(
                                    "${text[0]}",
                                    style: TextStyle(
                                        fontFamily: 'quran', fontSize: 30),
                                    textAlign: TextAlign.end,
                                  )),
                                  Text('Malay Translation'),
                                  Container(
                                    child: Card(
                                        child: Text(
                                      "${text[1]}",
                                      style: TextStyle(
                                          fontSize: 20.0,
                                          fontWeight: FontWeight.w300),
                                      textAlign: TextAlign.right,
                                    )),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      );
                    },
                    itemCount: 7,
                  );
                }),
          ),
        ));
  }
}

Answer 1

我实际上找到了一种解决方法。就是在文本容器旁边添加一个具有额外宽度的容器。这样文本就可以被推到一边了。

Answer 2

用Row( children: <Widget>[ Container( width: 70.0, ), Flexible( child: Text("Hi"), ) ], )小部件包裹您的文本，您就可以开始了。