Flutter标题容器插件 flutter_titled_container 的使用

flutter_titled_container 是一个用于在容器顶部显示标题的Flutter插件。它非常适合与子容器一起使用，例如 Container。

属性说明

您可以设置以下属性：

• title：要显示的文本。
• titleColor：标题的颜色，默认为黑色。
• fontSize：标题的字体大小，默认为14.0。
• backgroundColor：标题的背景颜色，默认为白色。
• textAlign：文本对齐方式，可以是左、中或右对齐。

示例截图

示例代码

以下是完整的示例代码，展示了如何使用 flutter_titled_container 插件来创建带有标题的容器。

完整示例 Demo

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        centerTitle: true,
        title: Text('Titled Container'),
      ),
      body: Center(
        child: TitledContainer(
          titleColor: Colors.blue,
          title: 'Container Title',
          textAlign: TextAlignTitledContainer.Center, // 可以更改为 Left 或 Right
          fontSize: 16.0,
          backgroundColor: Colors.white,
          child: Container(
            width: 250.0,
            height: 200.0,
            decoration: BoxDecoration(
              border: Border.all(
                color: Colors.blue,
              ),
              borderRadius: BorderRadius.all(
                Radius.circular(10.0),
              ),
            ),
            child: Center(
              child: Text(
                'Some text',
                style: TextStyle(fontSize: 28.0),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

另一个示例

下面是一个不同的示例，展示如何将标题对齐到左侧，并更改一些样式：

class AnotherExamplePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        centerTitle: true,
        title: Text('Another Example'),
      ),
      body: Center(
        child: TitledContainer(
          titleColor: Colors.red,
          title: 'Left Aligned Title',
          textAlign: TextAlignTitledContainer.Left,
          fontSize: 14.0,
          backgroundColor: Colors.white,
          child: Container(
            width: 300.0,
            height: 250.0,
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(
                color: Colors.red,
              ),
              borderRadius: BorderRadius.all(
                Radius.circular(15.0),
              ),
            ),
            child: Center(
              child: Text(
                'Left Align text',
                style: TextStyle(fontSize: 28.0),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

通过这些示例，您可以看到如何使用 flutter_titled_container 插件来快速创建带有自定义标题和样式的容器。根据您的需求调整属性值，可以实现多种不同的视觉效果。