為什么不能將 Circle Avatar 識別為領先：在 ListTile 內？

Question

當前嘗試調試將商品添加到購物車並導航到應該顯示購物車商品的購物車時發生的錯誤。

將商品添加到購物車的功能運行。 僅在將商品添加到購物車時引發錯誤。 構建不會崩潰。

錯誤位於購物車項目小部件中。 cart_item.dart 嵌套在 cart_screen.dart 中。

- - - - - - - - - - - - - - - - - - -更新 - - - - - - -------------------------

當識別為leading:在 ListTile 中。 當其他小部件（即文本）被識別為leading:不發生錯誤。 為什么不能將 Circle Avatar 識別為leading:在 ListTile 內？

錯誤：

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
[38;5;244mThe following assertion was thrown during performLayout():[39;49m
Leading widget consumes entire tile width. Please use a sized widget, or consider replacing ListTile with a custom widget (see https://api.flutter.dev/flutter/material/ListTile-class.html#material.ListTile.4)
'package:flutter/src/material/list_tile.dart':
Failed assertion: line 1547 pos 7: 'tileWidth != leadingSize.width'


[38;5;248mEither the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=BUG.md
[39;49m

[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mListTile[39;49m
 lib\widgets\cart_item.dart
[38;5;244mWhen the exception was thrown, this was the stack[39;49m
[38;5;244m#2      _RenderListTile.performLayout[39;49m
 package:flutter/…/material/list_tile.dart
[38;5;244m#3      RenderObject.layout[39;49m
 package:flutter/…/rendering/object.dart
[38;5;244m#4      RenderPadding.performLayout[39;49m
 package:flutter/…/rendering/shifted_box.dart
[38;5;244m#5      RenderObject.layout[39;49m
 package:flutter/…/rendering/object.dart
[38;5;244m#6      RenderProxyBoxMixin.performLayout[39;49m
 package:flutter/…/rendering/proxy_box.dart
[38;5;244m...[39;49m
[38;5;244mThe following RenderObject was being processed when the exception was fired: _RenderListTile#414b8 relayoutBoundary=up38 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE[39;49m
[38;5;244mRenderObject: _RenderListTile#414b8 relayoutBoundary=up38 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE[39;49m
    [38;5;244mparentData: offset=Offset(0.0, 0.0) (can use size)[39;49m
    [38;5;244mconstraints: BoxConstraints(w=11.2, 0.0<=h<=Infinity)[39;49m
    [38;5;244msize: MISSING[39;49m
    [38;5;244mleading: RenderConstrainedBox#0efc0 relayoutBoundary=up39 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE[39;49m
        [38;5;244mparentData: offset=Offset(0.0, 0.0) (can use size)[39;49m
        [38;5;244mconstraints: BoxConstraints(0.0<=w<=11.2, 0.0<=h<=56.0)[39;49m
        [38;5;244msize: Size(11.2, 40.0)[39;49m
        [38;5;244madditionalConstraints: BoxConstraints(w=40.0, h=40.0)[39;49m
        [38;5;244mchild: RenderDecoratedBox#c9777 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE[39;49m
            [38;5;244mparentData: <none> (can use size)[39;49m
            [38;5;244mconstraints: BoxConstraints(w=11.2, h=40.0)[39;49m
            [38;5;244msize: Size(11.2, 40.0)[39;49m
            [38;5;244mdecoration: BoxDecoration[39;49m
                [38;5;244mcolor: Color(0xff1976d2)[39;49m
                [38;5;244mshape: circle[39;49m
            [38;5;244mconfiguration: ImageConfiguration(bundle: PlatformAssetBundle#ed2ae(), devicePixelRatio: 3.5, locale: en_US, textDirection: TextDirection.ltr, platform: android)[39;49m
            [38;5;244mchild: RenderPositionedBox#1179f NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE[39;49m
                [38;5;244mparentData: <none> (can use size)[39;49m
                [38;5;244mconstraints: BoxConstraints(w=11.2, h=40.0)[39;49m
                [38;5;244msize: Size(11.2, 40.0)[39;49m
                [38;5;244malignment: center[39;49m
                [38;5;244mtextDirection: ltr[39;49m
                [38;5;244mwidthFactor: expand[39;49m
                [38;5;244mheightFactor: expand[39;49m
                [38;5;244mchild: RenderParagraph#1a8e3 relayoutBoundary=up1 NEEDS-PAINT[39;49m
                    [38;5;244mparentData: offset=Offset(0.1, 0.0) (can use size)[39;49m
                    [38;5;244mconstraints: BoxConstraints(0.0<=w<=11.2, 0.0<=h<=40.0)[39;49m
                    [38;5;244msize: Size(11.0, 40.0)[39;49m
                    [38;5;244mtextAlign: start[39;49m
                    [38;5;244mtextDirection: ltr[39;49m
                    [38;5;244msoftWrap: wrapping at box width[39;49m
                    [38;5;244moverflow: clip[39;49m
                    [38;5;244mlocale: en_US[39;49m
                    [38;5;244mmaxLines: unlimited[39;49m
    [38;5;244mtitle: RenderParagraph#8f830 NEEDS-LAYOUT NEEDS-PAINT[39;49m
        [38;5;244mparentData: offset=Offset(0.0, 0.0)[39;49m
        [38;5;244mconstraints: MISSING[39;49m
        [38;5;244msize: MISSING[39;49m
        [38;5;244mtextAlign: start[39;49m
        [38;5;244mtextDirection: ltr[39;49m
        [38;5;244msoftWrap: wrapping at box width[39;49m
        [38;5;244moverflow: clip[39;49m
        [38;5;244mlocale: en_US[39;49m
        [38;5;244mmaxLines: unlimited[39;49m
        [38;5;244mtext: TextSpan[39;49m
            [38;5;244mdebugLabel: ((englishLike subhead 2014).merge((blackMountainView subtitle1).apply)).copyWith[39;49m
            [38;5;244minherit: false[39;49m
            [38;5;244mcolor: Color(0xdd000000)[39;49m
            [38;5;244mfamily: Lato[39;49m
            [38;5;244msize: 16.0[39;49m
            [38;5;244mweight: 400[39;49m
            [38;5;244mbaseline: alphabetic[39;49m
            [38;5;244mdecoration: TextDecoration.none[39;49m
            [38;5;244m"Yellow Scarf"[39;49m
    [38;5;244msubtitle: RenderParagraph#efae3 NEEDS-LAYOUT NEEDS-PAINT[39;49m
        [38;5;244mparentData: offset=Offset(0.0, 0.0)[39;49m
        [38;5;244mconstraints: MISSING[39;49m
        [38;5;244msize: MISSING[39;49m
        [38;5;244mtextAlign: start[39;49m
        [38;5;244mtextDirection: ltr[39;49m
        [38;5;244msoftWrap: wrapping at box width[39;49m
        [38;5;244moverflow: clip[39;49m
        [38;5;244mlocale: en_US[39;49m
        [38;5;244mmaxLines: unlimited[39;49m
        [38;5;244mtext: TextSpan[39;49m
            [38;5;244mdebugLabel: ((englishLike body1 2014).merge((blackMountainView bodyText2).apply)).copyWith[39;49m
            [38;5;244minherit: false[39;49m
            [38;5;244mcolor: Color(0x8a000000)[39;49m
            [38;5;244mfamily: Lato[39;49m
            [38;5;244msize: 14.0[39;49m
            [38;5;244mweight: 400[39;49m
            [38;5;244mbaseline: alphabetic[39;49m
            [38;5;244mdecoration: TextDecoration.none[39;49m
            [38;5;244m"x 1"[39;49m
    [38;5;244mtrailing: RenderParagraph#53ad3 relayoutBoundary=up39 NEEDS-PAINT[39;49m
        [38;5;244mparentData: offset=Offset(0.0, 0.0) (can use size)[39;49m
        [38;5;244mconstraints: BoxConstraints(0.0<=w<=11.2, 0.0<=h<=56.0)[39;49m
        [38;5;244msize: Size(11.0, 56.0)[39;49m
        [38;5;244mtextAlign: start[39;49m
        [38;5;244mtextDirection: ltr[39;49m
        [38;5;244msoftWrap: wrapping at box width[39;49m
        [38;5;244moverflow: clip[39;49m
        [38;5;244mlocale: en_US[39;49m
        [38;5;244mmaxLines: unlimited[39;49m
        [38;5;244mtext: TextSpan[39;49m
            [38;5;244mdebugLabel: (englishLike body1 2014).merge((blackMountainView bodyText2).apply)[39;49m
            [38;5;244minherit: false[39;49m
            [38;5;244mcolor: Color(0xdd000000)[39;49m
            [38;5;244mfamily: Lato[39;49m
            [38;5;244msize: 14.0[39;49m
            [38;5;244mweight: 400[39;49m
            [38;5;244mbaseline: alphabetic[39;49m
            [38;5;244mdecoration: TextDecoration.none[39;49m
            [38;5;244m"$19.99"[39;49m
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: _RenderListTile#414b8 relayoutBoundary=up38 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'

[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mListTile[39;49m
 lib\widgets\cart_item.dart
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

...

繼續在整個剩余的小部件樹中拋出錯誤。

錯誤根源發生在這里- cart_item.dart：（忽略提供程序包）

import 'package:flutter/material.dart';
// import 'package:provider/provider.dart';

// import '../models/product_model.dart';
// import 'product_item.dart';

class CartItem extends StatelessWidget {
  CartItem({this.id, this.price, this.quantity, this.title});
  final String id;
  final double price;
  final int quantity;
  final String title;

  @override
  Widget build(BuildContext context) {
    // final product = Provider.of<Product>(context, listen: false);
    return Card(
      margin: EdgeInsets.symmetric(
        vertical: 15,
        horizontal: 4,
      ),
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListTile(
          leading: CircleAvatar(
            child: Text('\$$price'),
          ),
          //Image.network(product.imageURL),
          title: Text(title),
          subtitle: Text('x $quantity'),
          trailing: Text('\$$price'),
        ),
      ),
    );
  }
}

供參考 - cart_screen.dart：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../models/cart.dart' show Cart;

import '../widgets/cart_item.dart';

class CartScreen extends StatelessWidget {
  static const routeName = '/cart';
  @override
  Widget build(BuildContext context) {
    final cart = Provider.of<Cart>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Your Cart'),
      ),
      body: Column(
        // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Card(
            margin: EdgeInsets.all(15.0),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text('Total',
                      style: TextStyle(
                        fontSize: 20,
                      )),
                  Spacer(),
                  Chip(
                    label: Text('\$${cart.totalAmount}'),
                  ),
                  FlatButton(
                    child: Text('order now'.toUpperCase()),
                    textColor: Theme.of(context).primaryColor,
                    onPressed: () {},
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Expanded(
                    child: ListView.builder(
                      shrinkWrap: true,
                      itemCount: cart.items.length,
                      itemBuilder: (ctx, index) => CartItem(
                          id: cart.items.values.toList()[index].id,
                          price: cart.items.values.toList()[index].price,
                          quantity: cart.items.values.toList()[index].quantity,
                          title: cart.items.values.toList()[index].title),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

它與錯誤指示我指向的 cart_item 中的 ListTile 中的前導參數無關。

這是 cart_screen 中的渲染問題。 ListView.builder 需要出現在 Card 小部件之外。 這是我修復代碼的方法：

cart_item 中的代碼沒有變化。

更新了 cart_screen 中的代碼：

class CartScreen extends StatelessWidget {
  static const routeName = '/cart';
  @override
  Widget build(BuildContext context) {
    final cart = Provider.of<Cart>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Your Cart'),
      ),
      body: Column(
        // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Card(
            margin: EdgeInsets.all(15.0),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text('Total',
                      style: TextStyle(
                        fontSize: 20,
                      )),
                  Spacer(),
                  Chip(
                    label: Text('\$${cart.totalAmount}'),
                  ),
                  FlatButton(
                    child: Text('order now'.toUpperCase()),
                    textColor: Theme.of(context).primaryColor,
                    onPressed: () {},
                  ),
                ],
              ),
            ),
          ),
          SizedBox(
            height: 10,
          ),
          Expanded(
            child: ListView.builder(
              shrinkWrap: true,
              itemCount: cart.items.length,
              itemBuilder: (ctx, index) => CartItem(
                  id: cart.items.values.toList()[index].id,
                  price: cart.items.values.toList()[index].price,
                  quantity: cart.items.values.toList()[index].quantity,
                  title: cart.items.values.toList()[index].title),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

class CartItem extends StatelessWidget {
  CartItem({this.id, this.price, this.quantity, this.title});
  final String id;
  final double price;
  final int quantity;
  final String title;

  @override
  Widget build(BuildContext context) {
    // final product = Provider.of<Product>(context, listen: false);
    return Card(
      margin: EdgeInsets.symmetric(
        vertical: 15,
        horizontal: 4,
      ),
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListTile(
          leading: CircleAvatar(
            child: Text('\$$price'),
          ),
          //Image.network(product.imageURL),
          title: Text(title),
          subtitle: Text('x $quantity'),
          trailing: Text('\$$price'),
        ),
      ),
    );
  }
}

class CartScreen extends StatelessWidget {
  static const routeName = '/cart';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Your Cart'),
      ),
      body: Column(
        // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Card(
            margin: EdgeInsets.all(15.0),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text('Total',
                      style: TextStyle(
                        fontSize: 20,
                      )),
                  Spacer(),
                  Chip(
                    label: Text('\$${50}'),
                  ),
                  FlatButton(
                    child: Text('order now'.toUpperCase()),
                    textColor: Theme.of(context).primaryColor,
                    onPressed: () {},
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Expanded(
                    child: ListView.builder(
                      shrinkWrap: true,
                      itemCount: 3,
                      itemBuilder: (ctx, index) => CartItem(
                          id: index.toString(),
                          price: index.toDouble(),
                          quantity: index,
                          title: index.toString()),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

我沒有從您的代碼中得到任何問題，請檢查一次