Flutter文章内容展示插件article的使用

Flutter文章内容展示插件article的使用

特性

• Headers: H1, H2, H3, H4, H5 和 H6。
• 段落: P。
• 文章、章节等。

开始使用

探索使用部分。

使用示例

基本元素

P(child: "使用此方法创建段落。"),

H1(child: "使用此方法创建一级标题。"),

H2(child: "使用此方法创建二级标题。"),

H3(child: "使用此方法创建三级标题。"),

H4(child: "使用此方法创建四级标题。"),

H5(child: "使用此方法创建五级标题。"),

H6(child: "使用此方法创建六级标题。"),

章节

Section(
    child: Column(
        children: [
        H1(
            child: "一级标题。",
        ),
        P(
            child: "正文。",
        ),
        // 添加更多小部件。
        ],
    ),
),

文章

Article(
    maxWidth: 800,
    header: H3(
    child: "文章标题。",
    ),
    body: Column(
    children: [
        Section(
        child: Column(
            children: [
            H5(
                child: "子标题1。",
            ),
            P(
                child: "正文1。",
            ),
            // 其他小部件。
            ],
        ),
        ),
        Section(
        child: Column(
            children: [
            H5(
                child: "子标题2。",
            ),
            P(
                child: "正文2。",
            ),
            ],
        ),
        )
    ],
    ),
    footer: P(
    child: "页脚。",
    ),
),

示例代码

在example/example.dart文件中，你可以找到以下代码：

import 'package:article/article.dart';
import 'package:flutter/material.dart';

class Example extends StatelessWidget {
  const Example({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          children: [
            Article(
              maxWidth: 800,
              header: H1(child: "一级标题"),
              body: Column(
                children: [
                  Section(
                    child: Column(
                      children: [
                        H1(child: "一级标题"),
                        P(child: "段落")
                        // 其他小部件...
                      ],
                    ),
                  ),
                  Section(
                    child: Column(
                      children: [
                        H1(child: "一级标题"),
                        P(child: "段落")
                        // 其他小部件...
                      ],
                    ),
                  ),
                ],
              ),
              footer: P(child: "页脚"),
            ),
          ],
        ),
      ),
    );
  }
}

以上代码展示了如何使用article插件来创建一个包含标题、段落和页脚的文章页面。