Flutter列表项布局插件row_item的使用

Flutter列表项布局插件row_item的使用

标题

Row Item

内容

这个包允许开发者在行中显示兼容信息。它是一个高度可定制的组件，您可以将任何您想要的内容放在标题和描述参数中。但推荐的方式是使用Text widget作为标题，并将另一个Text或Icon widget作为视图中的描述部分。

您可以查看下面这些示例。

示例

如果您想深入了解示例，请查看项目提供的example文件夹。

RowItem

这是原始的组件。您可以将任何您想要的组件放在title和description参数中。

RowItem(
    title: Text('title'),
    description: Text('description'),
)

RowItem.text

文本变体简化了在组件中显示文本信息的操作。它还为标题和描述文本标签提供了样式。

RowItem.text(
  'title',
  'description',
)

RowItem.boolean

您可以使用此组件显示布尔状态（true、false 或 null）。图标放置在描述部分的颜色和大小都是可定制的。使用outline参数可以使用每个图标的不同版本，而不是默认版本。

RowItem.boolean(
  'Displays a checked icon',
  true,
)

RowItem.tap

最后一个变体使description文本可点击，使用onTap参数。如果此参数不是null，描述文本将带下划线。

RowItem.tap(
  'This item is clickable',
  'Tap me!',
  onTap: () => print("Hello world!"),
)

Getting Started

这个项目是一个Dart包的起点，一个包含代码的库模块，可以在多个Flutter或Dart项目中轻松共享。

对于帮助开始Flutter，请查看我们的在线文档，提供教程、示例、移动开发指导和完整的API参考。

Built with

• Flutter - 美丽的原生应用在短时间内完成。
• Android Studio - 用于构建各种Android设备的应用工具。
• Visual Studio Code - 重新定义的代码编辑器。

Authors

• Jesús Rodríguez - 您可以在GitHub、Twitter和Reddit上找到我。

License

此项目在GNU GPL v3许可证下进行 - 请参阅LICENSE文件获取详细信息。

示例代码

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'row_item',
      theme: ThemeData(useMaterial3: true),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  Widget get _spacer => const SizedBox(height: 12);
  Widget get _cardSpacer => const SizedBox(height: 4);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Row item')),
      body: ListView(
        padding: const EdgeInsets.all(8),
        children: [
          Column(children: [
            Card(
              child: Padding(
                padding: const EdgeInsets.all(8),
                child: Column(children: [
                  RowItem.text('English', 'Hello'),
                  _spacer,
                  RowItem.text('Español', 'Hola'),
                  _spacer,
                  RowItem.text('English', 'Bye'),
                  _spacer,
                  RowItem.text('Español', 'Adiós'),
                ]),
              ),
            ),
            _cardSpacer,
            Card(
              child: Padding(
                padding: const EdgeInsets.all(8),
                child: Column(children: [
                  RowItem.text(
                    'English',
                    'Hello',
                    titleStyle: const TextStyle(color: Colors.blue),
                    descriptionStyle: const TextStyle(fontSize: 18),
                  ),
                  _spacer,
                  RowItem.text(
                    'Español',
                    'Hola',
                    titleStyle: const TextStyle(color: Colors.red),
                    descriptionStyle: const TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  _spacer,
                  RowItem.text(
                    'English',
                    'Bye',
                    titleStyle: const TextStyle(color: Colors.blue),
                    descriptionStyle: const TextStyle(
                      fontStyle: FontStyle.italic,
                    ),
                  ),
                  _spacer,
                  RowItem.text(
                    'Español',
                    'Adiós',
                    titleStyle: const TextStyle(color: Colors.red),
                    descriptionStyle: const TextStyle(letterSpacing: 3),
                  ),
                ]),
              ),
            ),
            _cardSpacer,
            Card(
              child: Padding(
                padding: const EdgeInsets.all(8),
                child: Column(children: [
                  RowItem.boolean('Firefox', true),
                  _spacer,
                  RowItem.boolean(
                    'Chrome',
                    false,
                    iconStyle: IconBooleanStyle.filled,
                  ),
                  _spacer,
                  RowItem.boolean(
                    'Firefox',
                    true,
                    iconColor: Theme.of(context).colorScheme.primary,
                    iconStyle: IconBooleanStyle.filled,
                  ),
                  _spacer,
                  RowItem.boolean(
                    'Chrome',
                    false,
                    iconColor: Theme.of(context).colorScheme.primary,
                  ),
                ]),
              ),
            ),
            _cardSpacer,
            Card(
              child: Padding(
                padding: const EdgeInsets.all(8),
                child: Column(children: [
                  RowItem.tap(
                    'Android',
                    'Click here',
                    onTap: () => print('Clicked!'),
                  ),
                  _spacer,
                  RowItem.tap(
                    'iOS',
                    'Click here',
                    onTap: () => print('Clicked!'),
                  ),
                  _spacer,
                  RowItem.tap(
                    'Windows Phone',
                    'Don\'t click',
                  ),
                  _spacer,
                  RowItem.tap(
                    'Symbian',
                    'Don\'t click',
                  ),
                ]),
              ),
            ),
          ]),
        ],
      ),
    );
  }
}