Question

我需要在脚手架的以下段落中添加图像和文本，以及列表视图或类似HTML的表格。

我看过添加文本的示例，但是它不包含任何填充，并且是边到边的，而且我不确定如何在文本中插入中断。

我有多个类，它们的结构与从导航栏中调用时的结构相似。

以下是默认类的示例：

//Contact Info
class Fourth extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Contact Info"),
      ),
      body: Center( 
      ),
    );
  }
}

这是我要处理的文字，我需要添加图片，然后加上几段文字。

class ThirdScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Supreme Council"),
      ),
      body: Center(
        child: new RichText(
          text: new TextSpan(
            //text: 'Hello ',
            //style: DefaultTextStyle.of(context).style,
            children: <TextSpan>[
              new TextSpan(
                text: 'Lorem ipsum dolor sit amet',
                style: new TextStyle(color: Colors.black),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

有多种显示此类列表的方法。您可以将Column包裹在SingleChildScrollView中，以进行滚动。然后只需添加一些Padding。还要看看Flutter Docs，它是Widget Catalog：

<input type="text" name="FirstName" id="FirstName" value="" oninput="regcheck()" ;>
<br>
<input type="text" name="FirstSong#" value="">

根据您的确切需求，您还可以使用支持一些基本html标签的flutter_html_view插件：

new SingleChildScrollView(
    child: Column (
        Padding( // some padding
            padding: EdgeInsets.only(top: 20.0, right: 30.0, left: 30.0, bottom: 50.0),
            child: Image.asset(...), // add the image source
        ),
        Padding( // some padding
            padding: EdgeInsets.only(top: 20.0, right: 30.0, left: 30.0, bottom: 50.0),
            child: Text("Lorem ipsum dolor sit amet", style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold)), // header
        ),
        Padding( // some padding
            padding: EdgeInsets.only(top: 10.0, right: 50.0, left: 50.0),
            child: Text("Some more text"), // add text
        ),
    )
)

Answer 2

单击RichText，单击Alt + Enter，然后选择添加填充。您将有很多选择，可以在EdgeInsets类页面上看到它们：

https://docs.flutter.io/flutter/painting/EdgeInsets-class.html

您可以使用\ n在文本中添加换行符，如下所示： “此文本将在其中添加换行符。”

否，您不需要在\ n的两侧添加空格。上面的结果是：

此文本将添加换行符在这里。

在Flutter中将文本，图像或列表视图添加到支架

2 个答案: