如何使屏幕在Flutter中可滚动？

Question

在我的Flutter项目中，一页中有几行，包括垂直对齐的卡片。现在，我希望该屏幕可滚动。

我尝试将列替换为 Listview ，但没有用。我也尝试用 SingleChildScrollview 包装它，但是没有用。它显示如下图-

这是代码-

HomeFragment.dart

    class HomeFragment extends StatefulWidget {

  @override
  _HomeFragmentState createState() => new _HomeFragmentState();
}

String jwt;

class _HomeFragmentState extends State<HomeFragment> {

  List<LastEngagement> _lastEngagements = List<LastEngagement>();

  @override
  void initState() {
    super.initState();
    _getLastEngagement;
    _getLastEngagement2();
  }

  void _getLastEngagement() {

    Webservice().load(LastEngagement.allLastEngagement).then((newsArticles) => {
        setState(() => {
      _lastEngagements = newsArticles
    })
  });

  }

  void _getLastEngagement2() {

    Webservice().load(LastEngagement.allLastEngagement).then((newsArticles) => {
        setState(() => {
      _lastEngagements = newsArticles
    })
  });

  }

  Card showCard(int index) {
    return new Card(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          children: <Widget>[
            CircleAvatar(
              backgroundImage: NetworkImage(
                  "https://randomuser.me/api/portraits/men/1.jpg"
              ),
            ),

            SizedBox(
              width: 10.0,
            ),
            Expanded(child: Text(_lastEngagements[index].title)),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('News'),
        ),
        body:Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  child: Container(
                    color: Colors.blue,
                    child: SizedBox(
                      height: 100.0,

                      child: new ListView.builder(
                        scrollDirection: Axis.horizontal,
                        itemCount: _lastEngagements.length,
                        itemBuilder: (BuildContext ctxt, int index) {
                          return Container(
                            width: 200.0,
                            child: showCard(index),
                          );
                        },
                      ),
                    ),
                  ),
                ),

              ],
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
            ),


            Row(

              children: <Widget>[

                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Card(
                      child: InkWell(
                        splashColor: Colors.blue.withAlpha(30),
                        onTap: () {
                          print('Card tapped.');
                        },
                        child: Container(

                          height: 100,
                          child: Text('A card that can be tapped'),
                        ),
                      ),
                    ),
                  ),
                ),


                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Card(
                      child: InkWell(
                        splashColor: Colors.blue.withAlpha(30),
                        onTap: () {
                          print('Card tapped.');
                        },
                        child: Container(

                          height: 100,
                          child: Text('A card that can be tapped'),
                        ),
                      ),
                    ),
                  ),
                ),

              ],

            ),

            Row(

              children: <Widget>[

                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Card(
                      child: InkWell(
                        splashColor: Colors.blue.withAlpha(30),
                        onTap: () {
                          print('Card tapped.');
                        },
                        child: Container(

                          height: 100,
                          child: Text('A card that can be tapped'),
                        ),
                      ),
                    ),
                  ),
                ),


                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Card(
                      child: InkWell(
                        splashColor: Colors.blue.withAlpha(30),
                        onTap: () {
                          print('Card tapped.');
                        },
                        child: Container(

                          height: 100,
                          child: Text('A card that can be tapped'),
                        ),
                      ),
                    ),
                  ),
                ),

              ],

            ),


            Row(

              children: <Widget>[

                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Card(
                      child: InkWell(
                        splashColor: Colors.blue.withAlpha(30),
                        onTap: () {
                          print('Card tapped.');
                        },
                        child: Container(

                          height: 100,
                          child: Text('A card that can be tapped'),
                        ),
                      ),
                    ),
                  ),
                ),


                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Card(
                      child: InkWell(
                        splashColor: Colors.blue.withAlpha(30),
                        onTap: () {
                          print('Card tapped.');
                        },
                        child: Container(

                          height: 100,
                          child: Text('A card that can be tapped'),
                        ),
                      ),
                    ),
                  ),
                ),

              ],

            ),


            Row(

              children: <Widget>[

                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Card(
                      child: InkWell(
                        splashColor: Colors.blue.withAlpha(30),
                        onTap: () {
                          print('Card tapped.');
                        },
                        child: Container(

                          height: 100,
                          child: Text('A card that can be tapped'),
                        ),
                      ),
                    ),
                  ),
                ),


                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Card(
                      child: InkWell(
                        splashColor: Colors.blue.withAlpha(30),
                        onTap: () {
                          print('Card tapped.');
                        },
                        child: Container(

                          height: 100,
                          child: Text('A card that can be tapped'),
                        ),
                      ),
                    ),
                  ),
                ),

              ],

            )


          ],
        )

    );
  }


}

用Listview替换列会导致以下错误-

因此，我需要一个永久性的解决方案来使屏幕可滚动，而与我使用的任何小部件无关。

Answer 1

SingleChildScrollView(
            scrollDirection: Axis.vertical,)

试试看。

Answer 2

您可以使用SingleChildScrollView或将列小部件更改为ListView

 @override
 Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('News'),
    ),
    body: SingleChildScrollView(
      child: Column(
        children: <Widget>[
        ],
      ),
    ));
  }

或

 @override
Widget build(BuildContext context) {
 return Scaffold(
    appBar: AppBar(
      title: Text('News'),
    ),
    body: ListView(
      children: <Widget>[],
    ));
}

Answer 3

以前的答案确实包含了解决方法..至少我是这样认为的..但是它们是错误的答案，这就是为什么它不起作用..试试这个

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("News"),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: SingleChildScrollView(),
          )
        ],
      ),
    );
  }

展开后，SingleChildScrollView（）可以全屏显示屏幕，以使其正常工作:) 我认为应该可以。祝你好运

Answer 4

尝试以下代码：

@override
      Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('News'),
         ),
         body: Column(
               children: <Widget>[
                        Expanded
                         (
                           child: SingleChildScrollView()
                        ),
                         flex: 1,
                    ]
               )
         );
       }