Question

我有一个正在创建列表的Listview.builder，但我想使其更加灵活，或者想知道如何略微缩小以容纳其上方的更大的AppBar。由于空间不足，我目前在ListView.Builder上方的AppBar上收到“底部溢出”错误。这是我目前用于Appbar和ListView的内容。

这是列表视图

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: FuelAppBar(
       appBar: AppBar(),
     ),
     body: Container(
         height: 200,
         child: ListView.builder(
         itemCount: locations.length,
         shrinkWrap: true,
         itemBuilder: (context, index) {
           return Padding(
             padding: EdgeInsets.symmetric(vertical: 1.0, horizontal: 4.0),
             child: Card(
               color: (index % 2 == 0) ? greycolor : Colors.white,
               child: Container(
                   height: 60,
                   padding: EdgeInsets.fromLTRB(0, 20, 0, 0),
                   child: Row(
                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                     children: <Widget>[
                       Text(locations[index].date,
                           style: TextStyle(fontSize: 20),
                           textAlign: TextAlign.left),
                       Text(locations[index].location,
                           style: TextStyle(
                               fontSize: 20, fontWeight: FontWeight.bold),
                           textAlign: TextAlign.center),
                       Text(locations[index].amount.toString(),
                           style: TextStyle(fontSize: 20),
                           textAlign: TextAlign.right)
                     ],
                   )
               ),
             ),
           );
         })),
     );
 }

这是自定义应用栏

@override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          children: [
            Container(
              color: Colors.orange,
              margin: EdgeInsets.all(15.0),
              child: FlutterLogo(
                size: 10.0,
              ),
            ),
            Container(
              color: Colors.blue,
              margin: EdgeInsets.all(15.0),
              child: FlutterLogo(
                size: 10.0,
              ),
            ),
            Container(
              color: Colors.purple,
              margin: EdgeInsets.all(15.0),
              child: FlutterLogo(
                size: 10.0,
              ),
            ),
          ],
        ),
        Row(
            children: [
              Container(
                color: Colors.orange,
                margin: EdgeInsets.all(25.0),
                child: FlutterLogo(
                  size: 10.0,
                ),
              ),
              Container(
                color: Colors.blue,
                margin: EdgeInsets.all(25.0),
                child: FlutterLogo(
                  size: 10.0,
                ),
              ),
              Container(
                color: Colors.purple,
                margin: EdgeInsets.all(25.0),
                child: FlutterLogo(
                  size: 10.0,
                ),
              )
            ]
    ),


        Row(
            children: [
              Container(
                color: Colors.orange,
                margin: EdgeInsets.all(25.0),
                child: FlutterLogo(
                  size: 10.0,
                ),
              ),
              Container(
                color: Colors.blue,
                margin: EdgeInsets.all(25.0),
                child: FlutterLogo(
                  size: 10.0,
                ),
              ),
              Container(
                color: Colors.purple,
                margin: EdgeInsets.all(25.0),
                child: FlutterLogo(
                  size: 10.0,
                ),
              ),
            ]),
      ]);


  @override
  Size get preferredSize => new Size.fromHeight(appBar.preferredSize.height);
  }

谢谢！

Answer 1

您可以使用PreferredSize小部件

data:...

如何调整ListView.builder的大小以适合大型顶部AppBar？

1 个答案: