我应该怎么做才能使 ListView 滚动

Question

I have a list view in flutter( v3.0.4 ), now I want the list view scroll, this is the code looks like:

  Widget _buildTodoView(BuildContext context) {
    return Container(
      key: _inputViewKey,
      width: double.infinity,
      child: SingleChildScrollView(
        child: ListView(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          children: c.widgetsList.obs,
        ),
        controller: scrollController,
        scrollDirection: Axis.vertical,
        padding: const EdgeInsets.all(8),
      ),
    );
  }

and this is the widgetsList render function:

List<Widget> buildTodoItems(List<Todo> newTodos) {
    List<Widget> widgets = new List.empty(growable: true);
    newTodos.forEach((element) {
      var card = SizedBox(
          height: 50,
          child: Card(
        child: Slidable(
            actionPane: SlidableDrawerActionPane(),
            actionExtentRatio: 0.25,
            actions: <Widget>[
              IconSlideAction(
                caption: '删除',
                color: Colors.blue,
                icon: Icons.archive,
                onTap: () => {
                  removeTodo(element)
                },
              ),
            ],
            child: CheckboxListTile(
              controlAffinity: ListTileControlAffinity.leading,
              title: Text(element.name,style:element.isCompleted == 1? TextStyle(color: Colors.grey):TextStyle(color: Colors.black)),
              value: element.isCompleted == 1?true:false,
              checkColor: Colors.green,
              selected: element.isCompleted == 1?true:false,
              onChanged: (bool? value) {
                if(value!){
                  element.isCompleted = 1;
                }else{
                  element.isCompleted = 0;
                }
                var _db = DBProvider.db;
                _db.updateTodo(element).then((value) => {
                  _db.getAllTodo().then((value1) => {buildTodoItems(value1)})
                });
              },
            )),
      ));
      widgets.add(card);
    });
    widgetsList = widgets;
    update();
    return widgets;
  }

when I build the application, the error shows like this:

flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞══════════════════════<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mThe following assertion was thrown during layout:<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mA RenderFlex overflowed by 510 pixels on the bottom.<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mThe relevant error-causing widget was:<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m  Column<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m  Column:file:///Users/xiaoqiangjiang/source/reddwarf/frontend/tik/lib/pages/home/home.dart:39:14<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mTo inspect this widget in Flutter DevTools, visit:<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mhttp://127.0.0.1:9100/#/inspector?uri=http%3A%2F%2F127.0.0.1%3A56558%2F_r8RvWY6MD8%3D%2F&inspectorRef=inspector-0<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mThe overflowing RenderFlex has an orientation of Axis.vertical.<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mThe edge of the RenderFlex that is overflowing has been marked in<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mthe rendering with a yellow and black striped pattern. This is<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196musually caused by the contents being too big for the RenderFlex.<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mConsider applying a flex factor (e.g. using an Expanded widget)<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mto force the children of the RenderFlex to fit within the<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mavailable space instead of being sized to their natural size.<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mThis is considered an error condition because it indicates that<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mthere is content that cannot be seen. If the content is<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mlegitimately bigger than the available space, consider clipping<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mit with a ClipRect widget before putting it in the flex, or using<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196ma scrollable container rather than a Flex, like a ListView.<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mThe specific RenderFlex in question is: RenderFlex#7823e relayoutBoundary=up6 OVERFLOWING:<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m  needs compositing<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m  parentData: <none> (can use size)<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m  constraints: BoxConstraints(0.0<=w<=320.0, h=456.0)<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m  size: Size(320.0, 456.0)<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m  direction: vertical<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m  mainAxisAlignment: start<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m  mainAxisSize: max<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m  crossAxisAlignment: center<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m  verticalDirection: down<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;

am I missing something? what should I do to make the ListView scroll?

Answer 1

1. You don't need a SingleChildScrollView above ListView. Since list view by itself will scroll.

2. If you wish to keep the SingleChildScrollView please add physics: const NeverScrollableScrollPhysics(), to the ListView widget.

3. The widget that holds _buildTodoView should have a fixed size. For example if you want it to be full screen add height:MediaQuery.of(context).size.height to the parent of _buildTodoView widget.

Answer 2

Try this:

Widget _buildTodoView(BuildContext context) {
      
      return Container(
key: _inputViewKey,
       width: MediaQuery.of(context).size.width,//you could change to your liking
       height: MediaQuery.of(context).size.height,
        child: ListView(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          children: c.widgetsList.obs,
        ),
        controller: scrollController,
        scrollDirection: Axis.vertical,
        padding: const EdgeInsets.all(8),
      );
  }

Answer 3

尝试这个

ListView(primary:false)