Flutter 应用程序开发：创建伟大的列表

terry 2年前 (2023-09-23) 阅读数 76 #移动小程序

Flutter 比我们想象的更强大。本文将介绍如何使用flutter展示漂亮的列表。我们先来看渲染。

款式还是很漂亮的。一步步完成这个小项目。

开发前准备

我们会使用FadeInImage这样的widget来加载网络图片，需要一个加载图标，所以需要在pubspec.yaml中配置静态资源。项目中只能配置静态资源使用

assets:
   - assets/images/
复制代码

需要一些假数据和一些mock常用的常量，所以专门创建了constant.dart来管理

    colors  # 颜色
    data  # list的数据
    # ...
复制代码

appBar的部分

appBar需要透明背景，这样就可以了可以查看以下图像。看起来非常身临其境。
您必须将高度设置为 0 才能取消 Android 特有的阴影效果。代码如下：

Scaffold(
    appBar: AppBar(
    backgroundColor: Colors.transparent,
    elevation: 0,
    title: Text(
        'flutter awesome list',
        style: TextStyle(
        color: Colors.white,
        ),
    ),
    ),
    body: HomeBody(),
);
复制代码

横幅的部分

我们需要使用 Transform.translate() 工具将横幅的部分向上移动，以便整个appBar显示在横幅上。这里显示的偏移量是offset：Offset(0, -56)，56是appBar的身高
下面的倒角形状需要用ClipPath()来完成。用途有点像画布。代码如下：

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path p = Path();
    p.lineTo(size.width, 0.0);
    p.lineTo(size.width, size.height / 4.75);
    p.lineTo(0.0, size.height / 3.75);
    p.close();
    return p;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return true;
  }
}
复制代码

用于显示用户信息的Widget有ListTile和CircleAvatar。使用方法比较简单。我直接贴出代码：

ListTile(
    leading: CircleAvatar(
    backgroundImage: NetworkImage(CONSTANT.userAvatar),
    ),
    title: Text(
    CONSTANT.userName,
    style: CONSTANT.defaultTextStyle,
    textScaleFactor: 1.5,
    ),
    subtitle: Text(
    CONSTANT.userProfile,
    style: CONSTANT.defaultTextStyle,
    ),
)
复制代码

部分列表视图

列表视图使用ListView.builder()，必须传递两个参数itemCount和itemBuilder。第一个控制列表的数量，第二个控制项目的显示。因为项目样式很多，所以它们被分成单独的 StatelessWidget 组件： AwesomeListItem
我们使用 InkWell 组件来包装 AwesomeListItem。 InkWell 是一个内置的 Flutter 组件。该组件的一个特点是单击时具有墨水晕染效果。当点击某个item时，我们使用Navigator.push进入详情页面
来显示图像。我们仍然使用FadeInImage。这种淡出效果的用户体验还是非常好的。然后使用Hero()包装FadeInImage，它可以在页面跳转时提供图像之间的过渡动画。很强大很酷

Hero(
    tag: index,
    child: FadeInImage(
        image: NetworkImage(data.image),
        fit: BoxFit.cover,
        placeholder: AssetImage('assets/images/loading.gif'),
    ),
)
复制代码