为啥 List-View Builder 在 SmartRefresher Widget 中返回具有固定高度和宽度的子项？

Posted 2023-02-23

【中文标题】为啥 List-View Builder 在 SmartRefresher Widget 中返回具有固定高度和宽度的子项？

【英文标题】：Why List-View Builder returns children with fixed height and width in SmartRefresher Widget?为什么 List-View Builder 在 SmartRefresher Widget 中返回具有固定高度和宽度的子项？

【发布时间】：2020-06-20 16:46:07

【问题描述】：

我正在使用pull-to-refresh package，并且通过使用 SmartRefresher 小部件，我无法更改 List-View builder 子项的高度或宽度。它总是给我一个全屏宽度和固定高度的孩子。

我知道问题是因为我正在使用 SmartRefresher，但我该如何解决呢？

SmartRefresher(
      enablePullDown: true,
      enablePullUp: true,
      header: BezierCircleHeader(
        bezierColor: Colors.deepPurpleAccent,
        enableChildOverflow: false,
      ),
      footer: CustomFooter(
        builder: (BuildContext context, LoadStatus mode) 
          Widget body;
          if (mode == LoadStatus.idle) 
            body = Text("pull up load");
           else if (mode == LoadStatus.loading) 
            body = CircularProgressIndicator();
           else if (mode == LoadStatus.failed) 
            body = Text("Load Failed!Click retry!");
           else if (mode == LoadStatus.canLoading) 
            body = Text("release to load more");
           else 
            body = Text("No more Data");
          
          return Container(
            height: 55.0,
            child: Center(child: body),
          );
        ,
      ),
      controller: _refreshController,
      onRefresh: _onRefresh,
      onLoading: _onLoading,
      child: ListView.builder(
          itemCount: items.length,
          itemExtent: 100.0,
          itemBuilder: (ctx, i) 
Container(
                  width: 50,
                  height: 600,)
          

它给了我这个用户界面：

我想要这样的东西：

Ps：我无法停止使用 Pull-to-refresh

【参考方案1】：

您可以在下面复制粘贴运行完整代码 你可以删除itemExtent

代码sn-p

ListView.builder(
                padding: const EdgeInsets.all(8),
                //itemExtent: 100,
                itemCount: items.length,
                itemBuilder: (BuildContext context, int index) 
                  return Container(
                    height: 400,
                    color: Colors.blue,
                    child: Card(child: Text('Entry $items[index]')),
                  );
                )

工作演示

完整代码

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  


class MyHomePage extends StatefulWidget 
  MyHomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  List<String> items = ["1", "2", "3", "4", "5", "6", "7", "8"];
  RefreshController _refreshController =
      RefreshController(initialRefresh: false);

  void _onRefresh() async 
    // monitor network fetch
    await Future.delayed(Duration(milliseconds: 1000));
    // if failed,use refreshFailed()
    _refreshController.refreshCompleted();
  

  void _onLoading() async 
    // monitor network fetch
    await Future.delayed(Duration(milliseconds: 1000));
    // if failed,use loadFailed(),if no data return,use LoadNodata()
    items.add((items.length + 1).toString());
    if (mounted) setState(() );
    _refreshController.loadComplete();
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
        body: SmartRefresher(
            enablePullDown: true,
            enablePullUp: true,
            header: WaterDropHeader(),
            footer: CustomFooter(
              builder: (BuildContext context, LoadStatus mode) 
                Widget body;
                if (mode == LoadStatus.idle) 
                  body = Text("pull up load");
                 else if (mode == LoadStatus.loading) 
                  body = CircularProgressIndicator();
                 else if (mode == LoadStatus.failed) 
                  body = Text("Load Failed!Click retry!");
                 else if (mode == LoadStatus.canLoading) 
                  body = Text("release to load more");
                 else 
                  body = Text("No more Data");
                
                return Container(
                  height: 55.0,
                  child: Center(child: body),
                );
              ,
            ),
            controller: _refreshController,
            onRefresh: _onRefresh,
            onLoading: _onLoading,
            child: ListView.builder(
                padding: const EdgeInsets.all(8),
                //itemExtent: 100,
                itemCount: items.length,
                itemBuilder: (BuildContext context, int index) 
                  return Container(
                    height: 400,
                    color: Colors.blue,
                    child: Card(child: Text('Entry $items[index]')),
                  );
                )));
  

【讨论】：

非常感谢，所以问题出在 itemExtent 参数上？为什么会这样？

我们可以改变宽度吗？因为它仍然需要全屏宽度？

itemExtent 表示高度，通常用于加速滚动性能。

你可以试试MediaQuery.of(context).size.width