SingleChildScrollView 不能与列中的多个组件一起使用 - 颤动

Question

我在颤振方面遇到问题。我的屏幕没有滚动。我有几个组件使用 Column 功能将它们放在一个下方，但简单的滚动功能不起作用。

这是我的代码

 Widget buildContent() {
    int count = 0;

    if (incomeList == null) {
      incomeList = List<Income>();
    }
      return Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            mainAxisSize: MainAxisSize.max,
            children: [
              Expanded(
                flex: 1,
                child: Column(
                  children: <Widget>[
                    Text(
                      "${widget.outstanding}",
                      textAlign: TextAlign.center,
                    ),
                    Padding(
                      padding: EdgeInsets.all(3.0),
                      child: Text(zeroAmount,
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            color: Colors.green,
                          )),
                    ),
                  ],
                ),
              ),
              Container(width: 0.4, height: 40, color: Colors.black54),
              Expanded(
                flex: 1,
                child: Column(
                  children: [
                    Text(
                      "${widget.received_or_paid}",
                      textAlign: TextAlign.center,
                    ),
                    Padding(
                      padding: EdgeInsets.all(3.0),
                      child: Text(zeroAmount, textAlign: TextAlign.center,
                          style: TextStyle(color: Colors.green)),
                    ),
                  ],
                ),
              ),
              //Divider(color: Colors.black54),
            ],
          ),
          // SizedBox(height: 12), //padding
          Padding(
            padding: EdgeInsets.only(top: 12.0, left: 15.0, right: 15.0),
            child: Divider(
              height: 1,
              color: Colors.black54,
            ),
          ),
          IncomeTransaction(),
        ],
      );
}

 @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: TextSwitchAppBar(

          bottom: PreferredSize(
            child: _buildLayoutAttributesPage(),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          backgroundColor: colorPrimary,
          onPressed: () {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => getTransactionType()));
          },
          child: Icon(
            Icons.add,
          ),
        ),
        body: Container(
            //height: 1000,
            padding: EdgeInsets.symmetric(vertical: 16.0),
            child: buildContent()
        ),
      );
    }

下面是收入交易代码

import 'package:flutter/material.dart';
import 'package:finsec/utils/colors.dart';
import 'package:finsec/utils/strings.dart';
import 'package:finsec/screens/transaction/text_switch_app_bar.dart';
import 'package:finsec/screens/transaction/row_column_layout_attributes.dart';
import 'package:finsec/widget/transaction_list_view.dart';
import 'package:finsec/screens/income/second_fragment.dart';
import 'package:finsec/screens/income/add_edit_income.dart';
import 'package:finsec/data/blocs/bloc_provider.dart';
import 'package:finsec/data/blocs/transaction_bloc.dart';
import 'package:finsec/screens/transaction/transaction_list.dart';
import 'package:finsec/data/db_provider.dart';
import 'package:sqflite/sqflite.dart';
import 'package:finsec/model/income/income.dart';
import 'package:finsec/widget/total_amount.dart';


class IncomeTransaction extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {

    return IncomeTransactionState();
  }
}

class IncomeTransactionState extends State<IncomeTransaction> {

  DBProvider db = new DBProvider();
  List<Income> incomeList;
  int count = 0;

  @override
  Widget build(BuildContext context) {
    if (incomeList == null) {
      incomeList = List<Income>();
      updateListView();
      for(int i=0; i<incomeList.length; i++) {
        print('CATEGORY');
        print(this.incomeList[i].category);
      }
    }
    TextStyle titleStyle = Theme.of(context).textTheme.subhead;
    return 
            ListView.builder(
              shrinkWrap: true,
              itemCount: count,
              itemBuilder: (BuildContext context, int position) {
                return Column(
                    children: [
                      ListTile(
                        leading: CircleAvatar(
                          backgroundColor: Colors.yellow,
                          child: Icon(Icons.play_arrow),
                        ),

                        title: Text(this.incomeList[position].category,
                          style: titleStyle,),

                        // subtitle: Text(this.incomeList[position].payoutDate),

                        trailing: GestureDetector(
                          child: Icon(Icons.delete, color: Colors.grey,),
                          onTap: () {
                            _delete(context, incomeList[position]);
                          },
                        ),


                        onTap: () {
                          debugPrint("ListTile Tapped");
                          navigateToDetail(
                              this.incomeList[position], 'Edit Note');
                        },
                      )
                    ]
                );
              }
            );


  }

  // Returns the priority color
  Color getPriorityColor(int priority) {
    switch (priority) {
      case 1:
        return Colors.red;
        break;
      case 2:
        return Colors.yellow;
        break;

      default:
        return Colors.yellow;
    }
  }

  // Returns the priority icon
  Icon getPriorityIcon(int priority) {
    switch (priority) {
      case 1:
        return Icon(Icons.play_arrow);
        break;
      case 2:
        return Icon(Icons.keyboard_arrow_right);
        break;

      default:
        return Icon(Icons.keyboard_arrow_right);
    }
  }

  void _delete(BuildContext context, Income note) async {

    int result = await db.deleteTransaction(note.id);
    if (result != 0) {
      _showSnackBar(context, 'Note Deleted Successfully');
      updateListView();
    }
  }

  void _showSnackBar(BuildContext context, String message) {

    final snackBar = SnackBar(content: Text(message));
    Scaffold.of(context).showSnackBar(snackBar);
  }

  void navigateToDetail(Income note, String title) async {
    bool result = await Navigator.push(context, MaterialPageRoute(builder: (context) {
     // return NoteDetail(Income, title);
    }));

    if (result == true) {
      updateListView();
    }
  }

  void updateListView() {

    final Future<Database> dbFuture = db.initializeDatabase();
    dbFuture.then((database) {

      Future<List<Income>> incomeListFuture = db.getIncomeList('income');
      incomeListFuture.then((incomeList) {
        setState(() {
          this.incomeList = incomeList;
          this.count = incomeList.length;
        });
      });
    });
  }
}

Listview 没有滚动。我尝试使用 SingleChildScrollView 但列表视图仍然没有滚动。我在网上读到 SingleChildScrollView 不适用于 Column 属性，但不确定这是否属实。我还读到我应该在列表视图顶部包含小部件（未完成的总数，收到的总数）作为列表视图的一部分，但不知道该怎么做。该标题不应该是可点击的。

谁能帮我修改这段代码，以便我的屏幕可以上下滚动。 另外，如果我在 listview builder 中使用 shrinkWrap: true，不知道为什么会出现底部溢出错误。

查看图片附件以获取即时输出。列表视图不滚动

Answer 1

在buildContent 中，将您的IncomeTransaction() 包装成Expanded：

点赞Expanded(child: IncomeTransaction())。

这应该可以解决。

如果您已经拥有ListView，则不需要SingleChildScrollView。 ListView 可自行滚动。

我建议阅读这篇文章https://flutter.dev/docs/development/ui/layout/box-constraints，它有助于理解此类情况。

Answer 2

Column 中buildContent() 方法中的IncomeTransaction 大小是无限的，因此它需要显示所有元素所需的空间。
你必须用Expanded 包裹它，所以它会占用屏幕上剩余的所有空间。