如何在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'),
                        ),
                      ),
                    ),
                  ),
                ),

              ],

            )


          ],
        )

    );
  }


}

将Column替换为Listview会导致以下错误-

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

- S. M. Asif

---

当您将内容包装到List或SingleChildScrollview中时，只需删除Expanded并尝试。 - Sunny

我应该删除所有的Expanded吗？ - S. M. Asif

是的，您需要删除所有的Expanded。 - Sunny

通过将内容包装成列表或SingleChildScrollview，我只是删除了Expanded。但它没有起作用。 - S. M. Asif

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>[],
    ));
}

- Jarvis

---

这正是我所做的，但它显示完全白屏。 - S. M. Asif

链接有效期为2小时。 - Jarvis

无法工作，页面仍然无法滚动。 - eqrakhattak

Answer 2

之前的回答包含了解决方案...至少我认为是这样..但它们存在错误，所以它并没有正常工作..尝试这个。

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

扩展满足了SingleChildScrollView()在屏幕上的全部高度，使其可以正常工作 :) 我认为它应该可以正常运行。祝你好运

- adib

---

扩展的小部件为我解决了这个问题。谢谢！ - Lee Casey

Answer 3

请尝试以下代码：

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

- Dhaval Patel

Answer 4

SingleChildScrollView(
            scrollDirection: Axis.vertical,)

尝试使用这个替代方案。

- manjesha

---

我尝试了但没有成功。它显示一个空白的白屏。 - S. M. Asif

SingleChildScrollView( scrollDirection: Axis.vertical, child: Column()), 请按照以下方式使用 - manjesha

Answer 5

只需使用这个：

SingleChildScrollView(
  child: Column(
    // You can put any widget below. Example:
    children: [
      SizedBox(
        child: Text('Hello World'),
      ),
    ],
  ),
),

- Emmanuel Oguneme