Question

大家好！

这里我正在做一个画廊应用程序的小项目，我设法显示相册及其缩略图。

我还想显示我从本地图库获得的专辑的名称和总文件数，GridTileBar 是专辑名称在左侧，总文件数在右侧，

对于我的左侧，我设法使用 title 属性显示专辑名称，但是对于右侧的总文件，我无法使用 trailing 属性显示它，奇怪的是我尝试显示 Icon 小部件，图标出现并且就在我显示的专辑名称旁边。

结果来自 flutter doctor

[✓] Flutter (Channel stable, 1.22.5, on Linux, locale en_US.UTF-8)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[!] Android Studio (not installed)
[✓] Connected device (1 available)

! Doctor found issues in 1 category.

工具

Debugging on My actual device which is Xiaomi Redmi 1S Android 7.1 Nougat

期待

现实

代码album_card.dart

import 'dart:io';

import "package:flutter/material.dart";

class AlbumCard extends StatelessWidget {
  AlbumCard(
      {@required this.albumName, this.thumbnail, this.totalFiles, this.isOdd});

  final String albumName;
  final int totalFiles;
  final File thumbnail;
  final bool isOdd;

  @override
  Widget build(BuildContext context) {
    return Card(
        margin: EdgeInsets.all(0),
        clipBehavior: Clip.antiAliasWithSaveLayer,
        child: GridTile(
          child: Image.file(
            thumbnail,
            fit: BoxFit.cover,
          ),
          footer: GridTileBar(
            backgroundColor: Colors.black45,
            title: Text('$albumName'),

            // Won't work if displaying a Text Widget but Work if it's an Icon Widget
            trailing: Text('$totalFiles'),
          ),
        ));
  }
}

Answer 1

如有必要，您可以使用 Text 小部件的 maxLines 属性来显示全文。看看下面的例子：

GridTile(
      child: Image.network(
        imageUrl,
        fit: BoxFit.cover,
      ),
      footer: GridTileBar(
        backgroundColor: Colors.black54,
        leading: IconButton(
          icon: Icon(Icons.favorite),
          onPressed: () {},
          iconSize: 20,
        ),
        title: Text(
          title,
          textAlign: TextAlign.center,
          style: TextStyle(fontSize: 14),
          maxLines: 2, // will show max two lines of text
        ),
        trailing: IconButton(
          icon: Icon(
            Icons.shopping_cart,
          ),
          iconSize: 20,
          onPressed: () {},
        ),
      ),
    );

在“拖尾”属性上使用文本小部件未显示在 GridTileBar 小部件中，但图标小部件显示

1 个答案: