How to prevent OverFlow of the Trailing widget using Column widget to occupy all the children elements inside of a ListTile widget?

huangapple go评论119阅读模式
英文:

How to prevent OverFlow of the Trailing widget using Column widget to occupy all the children elements inside of a ListTile widget?

问题

如何防止使用Column小部件扩展Trailing小部件时出现溢出,以便占用ListTile小部件内的所有子元素?

感谢您的帮助。

英文:

How to prevent OverFlow of the Trailing widget using Column widget to occupy all the children elements inside of a ListTile widget ?
Thanks and appreiciate you help.

    body: ListView.builder(
        restorationId: 'sampleItemListView',
        itemCount: items.length,
        itemBuilder: (BuildContext context, int index) {
          final item = items[index];

          return Padding(
            padding: const EdgeInsets.only(top: 8, left: 8, right: 8),
            child: Container(
              color: Colors.grey.shade400,
              height: 200,
              child: ListTile(
                  isThreeLine: true,
                  leading: const CircleAvatar(
                    // Display the Flutter Logo image asset.
                    foregroundImage:
                        AssetImage('assets/images/flutter_logo.png'),
                  ),
                  title: Text('Title ${item.id}'),
                  subtitle: Text('Subtitle ${item.id}'),

How to expand the column in the Trailing component of the
ListTile to prevent Overflow?

                  trailing: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: const [
                      Icon(
                        Icons.emoji_emotions,
                        color: Colors.green,
                      ),
                      Icon(
                        Icons.emoji_emotions,
                        color: Colors.orange,
                      ),
                      Icon(
                        Icons.emoji_emotions,
                        color: Colors.red,
                      ),
                    ],
                  ),


                  onTap: () {
                    Navigator.restorablePushNamed(
                      context,
                      SampleItemDetailsView.routeName,
                    );
                  }),
            ),
          );
        },
      ),

How to prevent OverFlow of the Trailing widget using Column widget to occupy all the children elements inside of a ListTile widget?

ERROR:

════════ Exception caught by rendering library ═════════════════════════════════
A RenderFlex overflowed by 16 pixels on the bottom.
The relevant error-causing widget was
Column

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

答案1

得分: 1

在你的情况下,有很多答案,比如
1:

  1: ListTile( visualDensity: VisualDensity(vertical: 4))

2:

  2: ListTile( 
        trailing: FittedBox(
            child: Column( children: const [Icon(),Icon(),Icon()]),
            ),
     )

但在我看来,最佳解决方案是,在这种复杂情况下使用 "Row" 而不是 "ListTile",它可以更好地控制UI小部件。

英文:

In your case there r many answers like

  1: ListTile( visualDensity: VisualDensity(vertical: 4))
  2: ListTile( 
        trailing: FittedBox(
            child: Column( children: const [Icon(),Icon(),Icon()]),
            ),
     )

** But best solution in my opinion, In such extensive cases use "Row" than "ListTile" it gives u way more control over ur UI widgets.

huangapple
  • 本文由 发表于 2023年2月19日 11:54:00
  • 转载请务必保留本文链接:https://go.coder-hub.com/75497881.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定