flutter - 如何使屏幕在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替换Column会导致以下错误-



因此，我需要一个永久性的解决方案来使屏幕可滚动，无论我使用什么小部件都没关系。

Answer 1

您可以使用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>[],
    ));
}