dart 尾随微件占用整个磁贴宽度,请使用已调整大小的微件,或考虑使用自定义微件替换ListTile

5us2dqdw  于 2023-03-15  发布在  其他
关注(0)|答案(7)|浏览(147)

我正在制作一个基本的购物应用程序。我的想法是制作一个我的产品列表磁贴,以便我可以编辑或删除产品。所以当我导航到该页面时,它显示了一个空白的白色页面,错误如图片Blank ScreenError所示

import 'package:flutter/material.dart';

class UserProductItem extends StatelessWidget {
  final String title;
  final String imageUrl;
  UserProductItem(this.title, this.imageUrl);

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(title),
      leading: CircleAvatar(
        backgroundImage: NetworkImage(imageUrl),
      ),
      trailing: Row(
        children: [
          IconButton(
            icon: Icon(Icons.edit),
            onPressed: () {},
            color: Theme.of(context).primaryColor,
          ),
          IconButton(
            icon: Icon(Icons.delete),
            onPressed: () {},
            color: Theme.of(context).errorColor,
          )
        ],
      ),
    );
  }
}
gupuwyp2

gupuwyp21#

Container Package trailing可能会给予您一些警告,因此最好的选择是用SizedBox Package wrap,并给它一个heightwidth

trailing: SizedBox(
              height: 100, width: 100, child: Image.network(item.imgurl)),
c0vxltue

c0vxltue2#

我也遇到了这个问题,并且能够通过在Row中将mainAxisSize设置为MainAxisSize.min来修复它:

trailing: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      IconButton(
        icon: Icon(Icons.edit),
        onPressed: () {},
        color: Theme.of(context).primaryColor,
      ),
      IconButton(
        icon: Icon(Icons.delete),
        onPressed: () {},
        color: Theme.of(context).errorColor,
      )
    ],
  ),
zynd9foi

zynd9foi3#

像这样将答案 Package 在FittedBox中

trailing: FittedBox(
    child: Row(
      children: [
        IconButton(
          onPressed: () {},
          icon: Icon(Icons.edit),
          color: Theme.of(context).colorScheme.primary,
        ),
        IconButton(
          onPressed: () {},
          icon: Icon(Icons.delete),
          color: Theme.of(context).errorColor,
        ),
      ],
    ),
  ),

你应该发现行有无限的宽度。因此你需要把它适合一个给定设备的可用大小。

2wnc66cl

2wnc66cl4#

我所做的是将行(尾随:Row()),并为其指定特定宽度

import 'package:flutter/material.dart';

class UserProductItem extends StatelessWidget {
  final String title;
  final String imageUrl;
  UserProductItem(this.title, this.imageUrl);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: ListTile(
        title: Text(title),
        leading: CircleAvatar(
          backgroundImage: NetworkImage(imageUrl),
        ),
        trailing: Container(
          width: 100,
          child: Row(
            children: [
              IconButton(
                icon: Icon(Icons.edit),
                onPressed: () {},
                color: Theme.of(context).primaryColor,
              ),
              IconButton(
                icon: Icon(Icons.delete),
                onPressed: () {},
                color: Theme.of(context).errorColor,
              )
            ],
          ),
        ),
      ),
    );
  }
}
jk9hmnmh

jk9hmnmh5#

来自关于tailing属性的文档:

/// To show right-aligned metadata (assuming left-to-right reading order;
/// left-aligned for right-to-left reading order), consider using a [Row] with
/// [CrossAxisAlignment.baseline] alignment whose first item is [Expanded] and
/// whose second child is the metadata text, instead of using the [trailing]
/// property.

我认为如果你需要在右边有两个图标的话,你不应该使用ListTile,相反,你应该用Rows来实现你的自定义小部件。
编辑:
比如:

InkWell( // Only wrap with an Inkwell if you need to add a click for the entire Row
  onTap: ...
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.baseline,
    children: [
      CircleAvatar(...),
      Expanded(child: Text(title)),
      Row(
        children: [
          IconButton1,
          IconButton2,
        ],
      ),
    ]
  ),
)
xqnpmsa8

xqnpmsa86#

由于引导而发生错误。只需用容器 Package 图像头像并给予它一个宽度
行距:容器(宽度:50,子级:圆形头像(背景图片:网络映像(imageUrl),),)

hjzp0vay

hjzp0vay7#

根据@Gpack答案,正确的解决方案应该在标题中使用RowlistTile的替代参数。

ListTile(
      onTap: () {
        
      },
      title: Row(
        crossAxisAlignment: CrossAxisAlignment.baseline,
        textBaseline: TextBaseline.alphabetic,
        children: [
          Expanded(
            child: RichText(
              text: TextSpan(
                text: 'Subtitle: ',
                style: Theme.of(context)
                    .textTheme
                    .bodyMedium!
                    .copyWith(fontWeight: FontWeight.bold),
                children: [
                  TextSpan(
                      text: description,
                      style: Theme.of(context).textTheme.bodyMedium)
                ],
              ),
            ),
          ),

           IconButton(
             visualDensity: VisualDensity.compact,
             onPressed: () {
             },
             icon: const Icon(Icons.add),
             tooltip: 'add1',
           ),
           IconButton(
             visualDensity: VisualDensity.compact,
             onPressed: () {
             },
             icon: const Icon(Icons.add),
             tooltip: 'add2',
           ),

      ),
      subtitle: Text('sample'),
      isThreeLine: true,
      // trailing: Row(
      //         mainAxisSize: MainAxisSize.min,
      //         children: [
      //           IconButton(
      //             visualDensity: VisualDensity.compact,
      //             onPressed: () {
      //             },
      //             icon: const Icon(Icons.add),
      //             tooltip: 'add1',
      //           ),
      //           IconButton(
      //             visualDensity: VisualDensity.compact,
      //             onPressed: () {
      //             },
      //             icon: const Icon(Icons.add),
      //             tooltip: 'add2',
      //           ),
      //         ],
      //       )

    );

如果你有一个小部件在尾随,并得到同样的错误尝试使用FittedBox如下:

trailing: FittedBox(
  fit: BoxFit.fitHeight,
  alignment: Alignment.centerRight,
  child: CircularProgressIndicator());

相关问题