Flutter卡片组件插件bs_flutter_card的使用

Flutter卡片组件插件bs_flutter_card的使用

简介

bs_flutter_card 是一个用于创建灵活且可扩展内容容器的 Flutter 插件。它提供了多种样式和选项，可以轻松地自定义卡片样式。

Card Example

开始使用

首先，在 pubspec.yaml 文件中添加依赖：

dependencies:
  ...
  bs_flutter_card: any

然后，你可以通过以下方式创建一个卡片：

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

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Bootstrap Card'),
        ),
        body: Container(
          padding: EdgeInsets.all(20.0),
          child: Column(
            children: [
              BsCard(
                children: [
                  BsCardContainer(
                    title: Text('Box Card'), // 卡片标题
                  ),
                  BsCardContainer(
                    child: Container(
                      child: Text('Box Card Content'), // 卡片内容
                    ),
                  ),
                  BsCardContainer(
                    actions: [
                      BsButton(
                        onPressed: () {}, // 按钮点击事件
                        style: BsButtonStyle.primary, // 按钮样式
                        prefixIcon: Icons.block, // 按钮图标
                        label: Text('Primary'), // 按钮标签
                      )
                    ]
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter卡片组件插件bs_flutter_card的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter卡片组件插件bs_flutter_card的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


bs_flutter_card 是一个用于 Flutter 的卡片组件插件，它可以帮助开发者快速创建美观的卡片布局。以下是如何使用 bs_flutter_card 插件的基本步骤和示例代码。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 bs_flutter_card 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  bs_flutter_card: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入插件

在你的 Dart 文件中导入 bs_flutter_card：

import 'package:bs_flutter_card/bs_flutter_card.dart';

3. 使用 BsCard 组件

BsCard 是 bs_flutter_card 插件中的主要组件。你可以使用它来创建各种卡片布局。

基本示例

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('BsFlutterCard Example'),
        ),
        body: Center(
          child: BsCard(
            child: Padding(
              padding: EdgeInsets.all(16.0),
              child: Text('This is a basic card'),
            ),
          ),
        ),
      ),
    );
  }
}

带标题和内容的卡片

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('BsFlutterCard Example'),
        ),
        body: Center(
          child: BsCard(
            header: BsCardHeader(
              title: Text('Card Title'),
            ),
            body: Padding(
              padding: EdgeInsets.all(16.0),
              child: Text('This is the body of the card.'),
            ),
          ),
        ),
      ),
    );
  }
}

带图片的卡片

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('BsFlutterCard Example'),
        ),
        body: Center(
          child: BsCard(
            header: BsCardHeader(
              title: Text('Card with Image'),
            ),
            body: Column(
              children: [
                Image.network(
                  'https://via.placeholder.com/150',
                  fit: BoxFit.cover,
                ),
                Padding(
                  padding: EdgeInsets.all(16.0),
                  child: Text('This is a card with an image.'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

带按钮的卡片

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('BsFlutterCard Example'),
        ),
        body: Center(
          child: BsCard(
            header: BsCardHeader(
              title: Text('Card with Buttons'),
            ),
            body: Padding(
              padding: EdgeInsets.all(16.0),
              child: Text('This is a card with buttons at the bottom.'),
            ),
            footer: BsCardFooter(
              children: [
                TextButton(
                  onPressed: () {
                    // Handle button press
                  },
                  child: Text('Button 1'),
                ),
                TextButton(
                  onPressed: () {
                    // Handle button press
                  },
                  child: Text('Button 2'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

4. 自定义卡片样式

你可以通过 BsCard 的各种属性来自定义卡片的样式，例如背景颜色、边框、阴影等。

BsCard(
  color: Colors.blue[100],  // 背景颜色
  border: Border.all(color: Colors.blue),  // 边框
  shadow: BoxShadow(
    color: Colors.black26,
    blurRadius: 10.0,
    offset: Offset(0, 5),
  ),  // 阴影
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('Custom styled card'),
  ),
)
回到顶部