Flutter列表项展示插件simple_list_tile的使用

Flutter列表项展示插件simple_list_tile的使用

simple_list_tile 是一个高度可定制的 Flutter 简单列表项组件，支持渐变效果。

示例展示

不带渐变的用法

SimpleListTile(
  onTap: () {
    print('test');
  },
  title: Text(
    'Title',
    style: TextStyle(
      color: Colors.white,
      fontWeight: FontWeight.bold,
      fontSize: 20,
    ),
  ),
  subtitle: Text(
    'Subtitle',
    style: TextStyle(
      color: Colors.white,
    ),
  ),
  trailing: Icon(
    Icons.arrow_forward_ios,
    color: Colors.white,
  ),
  leading: Icon(
    Icons.phone_android,
    color: Colors.blue,
  ),
  borderRadius: BorderRadius.circular(20),
  tileColor: Colors.grey[300]!,
  circleColor: Colors.grey[100]!,
  circleDiameter: 200,
  gradient: null, // 不带渐变
),
SizedBox(
  height: 20,
),
SimpleListTile(
  onTap: () {
    print('test');
  },
  title: Text(
    'Title',
    style: TextStyle(
      color: Colors.black,
      fontWeight: FontWeight.bold,
      fontSize: 20,
    ),
  ),
  subtitle: Text(
    'Subtitle',
    style: TextStyle(
      color: Colors.black,
    ),
  ),
  trailing: Icon(Icons.arrow_forward_ios),
  leading: Image.asset(
    'assets/guided_faq.png',
  ),
  borderRadius: BorderRadius.circular(20),
  tileColor: Colors.white,
  circleColor: Colors.blue[800]!,
  circleDiameter: 200,
)

带渐变的用法

SimpleListTile(
  onTap: () {
    print('test');
  },
  title: Text(
    'Title',
    style: TextStyle(
      color: Colors.white,
      fontWeight: FontWeight.bold,
      fontSize: 20,
    ),
  ),
  subtitle: Text(
    'Subtitle',
    style: TextStyle(
      color: Colors.white,
    ),
  ),
  trailing: Icon(
    Icons.arrow_forward_ios,
    color: Colors.white,
  ),
  leading: Icon(
    Icons.phone_android,
    color: Colors.blue,
  ),
  borderRadius: BorderRadius.circular(20),
  tileColor: Colors.grey[300]!,
  circleColor: Colors.grey[100]!,
  circleDiameter: 200,
  gradient: LinearGradient(
    colors: [Colors.blue, Colors.green],
  ),
)

完整示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        backgroundColor: Colors.grey[100],
        appBar: AppBar(),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [
              // 示例1：带渐变的列表项
              SimpleListTile(
                onTap: () {
                  print('test');
                },
                title: Text(
                  'Title',
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 20,
                  ),
                ),
                subtitle: Text(
                  'Subtitle',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                trailing: Icon(
                  Icons.arrow_forward_ios,
                  color: Colors.white,
                ),
                leading: Icon(
                  Icons.phone_android,
                  color: Colors.blue,
                ),
                borderRadius: BorderRadius.circular(20),
                tileColor: Colors.grey[300]!,
                circleColor: Colors.grey[100]!,
                circleDiameter: 200,
                gradient: LinearGradient(
                  colors: [Colors.blue, Colors.green],
                ),
              ),
              SizedBox(
                height: 20,
              ),
              // 示例2：带渐变的列表项
              SimpleListTile(
                onTap: () {
                  print('test');
                },
                title: Text(
                  'Title',
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 20,
                  ),
                ),
                subtitle: Text(
                  'Subtitle',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                trailing: Icon(
                  Icons.arrow_forward_ios,
                  color: Colors.white,
                ),
                leading: Icon(
                  Icons.phone_android,
                  color: Colors.blue,
                ),
                borderRadius: BorderRadius.circular(20),
                tileColor: Colors.grey[300]!,
                circleColor: Colors.grey[100]!,
                circleDiameter: 200,
                gradient: LinearGradient(
                  colors: [Colors.red, Colors.yellow],
                ),
              ),
              SizedBox(
                height: 20,
              ),
              // 示例3：不带渐变的列表项
              SimpleListTile(
                onTap: () {
                  print('test');
                },
                title: Text(
                  'Title',
                  style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                    fontSize: 20,
                  ),
                ),
                subtitle: Text(
                  'Subtitle',
                  style: TextStyle(
                    color: Colors.black,
                  ),
                ),
                trailing: Icon(Icons.arrow_forward_ios),
                leading: Image.asset(
                  'assets/guided_faq.png',
                ),
                borderRadius: BorderRadius.circular(20),
                tileColor: Colors.white,
                circleColor: Colors.blue[800]!,
                circleDiameter: 200,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter列表项展示插件simple_list_tile的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter列表项展示插件simple_list_tile的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


simple_list_tile 是一个轻量级的 Flutter 插件，用于快速创建简单的列表项。它提供了一种简单的方式来显示带有图标、标题和副标题的列表项，类似于 Flutter 的 ListTile，但更加简洁和易于使用。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  simple_list_tile: ^1.0.0  # 请查看 pub.dev 获取最新版本

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

使用示例

以下是如何使用 simple_list_tile 插件创建一个简单的列表项的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Simple List Tile Example'),
        ),
        body: ListView(
          children: [
            SimpleListTile(
              leading: Icon(Icons.home),
              title: Text('Home'),
              subtitle: Text('This is the home page'),
              onTap: () {
                print('Home tapped');
              },
            ),
            SimpleListTile(
              leading: Icon(Icons.settings),
              title: Text('Settings'),
              subtitle: Text('This is the settings page'),
              onTap: () {
                print('Settings tapped');
              },
            ),
            SimpleListTile(
              leading: Icon(Icons.info),
              title: Text('About'),
              subtitle: Text('This is the about page'),
              onTap: () {
                print('About tapped');
              },
            ),
          ],
        ),
      ),
    );
  }
}

参数说明

SimpleListTile 提供了以下主要参数：

  • leading: 列表项前展示的图标或小部件（通常是一个 Icon）。
  • title: 列表项的主要文本内容（通常是一个 Text 小部件）。
  • subtitle: 列表项的次要文本内容（通常是一个 Text 小部件）。
  • onTap: 当用户点击列表项时触发的回调函数。

自定义样式

你可以通过调整 SimpleListTile 的参数来自定义列表项的样式。例如，你可以更改图标、文本样式、背景颜色等。

SimpleListTile(
  leading: Icon(Icons.star, color: Colors.amber),
  title: Text('Favorites', style: TextStyle(fontWeight: FontWeight.bold)),
  subtitle: Text('Your favorite items', style: TextStyle(color: Colors.grey)),
  onTap: () {
    print('Favorites tapped');
  },
),
回到顶部