使用 ListView 时出现错误使用 ParentDataWidget 错误答案

【问题标题】：Getting Incorrect use of ParentDataWidget error when I use ListView使用 ListView 时出现错误使用 ParentDataWidget 错误
【发布时间】：2019-11-12 06:53:50
【问题描述】：

在我的应用程序的这一部分中，我有 ListView，当我运行应用程序时出现此错误，我无法解决：

Scaffold(
  body: Directionality(
textDirection: TextDirection.rtl,
child: Container(
  child: StreamBuilder(
    stream: globals.database.ticketsDao.getTicketsStream(),
    builder: (BuildContext context, AsyncSnapshot<List<Tickets>> snapshot) {
      if (snapshot.hasData) {
        return Column(
          children: <Widget>[
            Expanded(
              child: ListView.separated(
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Flexible(
                        child: Text(
                          snapshot.data[index].subject,
                          style: Theme.of(context).textTheme.caption.copyWith(fontFamily: 'IranSansBold'),
                        ),
                      ),
                      subtitle: Text(
                        snapshot.data[index].description,
                        style: Theme.of(context).textTheme.caption.copyWith(fontFamily: 'IranSansLight'),
                      ),
                    );
                  },
                  separatorBuilder: (context, index) {
                    return Divider();
                  },
                  itemCount:  snapshot.data.length),
            ),
          ],
        );
      } else {
        return Container(
            child: Center(
          child: Text(
            Strings.notAnyTickets,),
          ),
        ));
      }
    },
  ),
),
));

错误：

══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════  
The following assertion was thrown building DefaultTextStyle(debugLabel:
((englishLike subhead  2014).merge(blackMountainView

subhead)).copyWith, inherit: false, color: Color(0xdd000000), family:
Roboto, size: 16.0, weight: 400, baseline: alphabetic, decoration:
TextDecoration.none, softWrap:  wrapping at box width, overflow:
clip):  Incorrect use of ParentDataWidget.

Flexible widgets must be
placed directly inside Flex widgets.  Flexible(no depth, flex: 1,
dirty) has a Flex ancestor, but there are other widgets between them:
 - _ListTile

 - Padding(padding: EdgeInsets(16.0, 0.0, 16.0, 0.0))
 - Semantics(container: false, properties: SemanticsProperties, selected: false, label: null, value:  null, hint: null, hintOverrides:
null)

 - Listener(listeners: [down], behavior: opaque)
 - _GestureSemantics
 - Listener(listeners: <none behavior: translucent)
 - RepaintBoundary
 - IndexedSemantics(index: 0)
 - KeepAlive(keepAlive: false)
 - SliverList(delegate: SliverChildBuilderDelegate#6802e(estimated child count: 19))

 - SliverPadding(padding: EdgeInsets(0.0, 0.0, 0.0, 50.0))
 - Viewport(axisDirection: down, anchor: 0.0, offset: ScrollPositionWithSingleContext#c95ba(offset:
 0.0, range: null..null, viewport: 335.0, ScrollableState, AlwaysScrollableScrollPhysics - ClampingScrollPhysics,
IdleScrollActivity#05a39, ScrollDirection.idle))
 - IgnorePointer-[GlobalKey#a3d1a](ignoring: false, ignoringSemantics: false)

 - Semantics(container: false, properties: SemanticsProperties, label: null, value: null, hint: null,  hintOverrides: null)
 - Listener(listeners: [down], behavior: opaque)
 - _GestureSemantics

 - Listener(listeners: [signal], behavior: deferToChild)
 - _ScrollSemantics-[GlobalKey#7cd1b]
 - RepaintBoundary
 - CustomPaint
 - RepaintBoundary
 - Expanded(flex: 1)  These widgets cannot come between a Flexible and its Flex.  The ownership chain for the parent of the offending
Flexible was:    DefaultTextStyle ← AnimatedDefaultTextStyle ←
_ListTile ← MediaQuery ← Padding ← SafeArea ←  Semantics ← Listener ← _GestureSemantics ← RawGestureDetector ← ⋯

【问题讨论】：

标签： flutter dart flutter-layout flutter-listview

【解决方案1】：

出现此错误是因为 Flexible 小部件必须是 Row、Column 或 Flex 的后代，

使用Flexible 小部件可以让Row、Column 或Flex 的子级灵活地扩展以填充主轴上的可用空间（例如，水平方向用于Row 或垂直方向对于Column)

解决上述问题有两种方法，

1：是将Flexible 小部件移动到flex 小部件内。下面的例子

ListView.separated(
   itemBuilder: (context, index) {
   return Container(
       height: 50,
       child: Column(
         mainAxisAlignment: MainAxisAlignment.end,
         children: <Widget>[
           Flexible(child: Text('Title')),
           Flexible(child: Text("Sub Title"))
         ],
       ),
     );
   },
separatorBuilder: (context, index) {
return Divider();
},
itemCount:  snapshot.data.length)

2：删除Flexible 小部件

ListTile(
 title: Text(
 snapshot.data[index].firstAndLastName,
 style: Theme.of(context).textTheme.caption.copyWith(fontFamily: 'IranSansBold'),
),
subtitle: Text(
snapshot.data[index].firstAndLastName,
style: Theme.of(context).textTheme.caption.copyWith(fontFamily: 
'IranSansLight'),
  ),
);

【讨论】：

【解决方案2】：

Flexible Widget 必须是 Expanded 或 Flex Widget 的直接子级。

在您的情况下，您将 Flexible 用作 ListTile 小部件的一部分，这不是合适的父级。

Flex 小部件必须直接放在 Flex 小部件中。

Flexible 有一个 Flex 祖先，但它们之间还有其他小部件：- _ListTile

【讨论】：