如何在颤动中制作可滚动列表答案

【问题标题】：How to make scrollable lists in flutter如何在颤动中制作可滚动列表
【发布时间】：2021-05-18 00:43:11
【问题描述】：

当我尝试生成比我的页面显示更多的文本时，我收到此错误enter image description here

有没有办法让内容变成可滚动的？我遵循了一些一般性说明，只要我使用 Text() 手动编写文本，一切都可以正常工作，遗憾的是这不符合我的要求，因为我需要自动生成数据。

import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    void main() => runApp(MaterialApp(
          debugShowCheckedModeBanner: false,
          home: QuoteList(),
        ));
    class QuoteList extends StatefulWidget {
      @override
      _QuoteListState createState() => _QuoteListState();
    }
    class _QuoteListState extends State<QuoteList> {
      List<Quote> quotes = [
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
        Quote(author: 'aaa', text: 'aaa'),
      ];
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            backgroundColor: Colors.grey[300],
            body: Container(
                width: double.infinity,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      colors: [
                        Colors.black,
                        Colors.black,
                      ]),
                ),
                child: Padding(
                  padding: EdgeInsets.fromLTRB(0.0, 3.0, 0.0, 3.0),
                  child: Column(
                    children: <Widget>[
                      Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: quotes
                            .map((quote) => QuoteCard(
                                quote: quote,
                                delete: () {
                                  setState(() {
                                    quotes.remove(quote);
                                  });
                                }))
                            .toList(),
                      )
                    ],
                  ),
                )));
      }
    }
    class QuoteCard extends StatelessWidget {
      final Quote quote;
      final Function delete;
      QuoteCard({this.quote, this.delete});
      @override
      Widget build(BuildContext context) {
        return Padding(
            padding: EdgeInsets.fromLTRB(0.0, 3.0, 0.0, 3.0),
            child: Container(
              child: Card(
                color: Colors.grey[800],
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      Container(
                        child: Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: <Widget>[
                              SizedBox(
                                width: 20.0,
                              ),
                              Text(
                                '${quote.text}',
                                style: TextStyle(
                                  fontSize: 18.0,
                                  color: Colors.white,
                                  letterSpacing: 3.0,
                                ),
                              ),
                            ]),
                      ),
                      ListTile(
                        title: Row(
                          children: <Widget>[
                            Expanded(
                                child: RaisedButton(
                              child: Text("delete"),
                              onPressed: delete,
                              color: Colors.grey[900],
                              textColor: Colors.white,
                              padding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
                            )),
                            SizedBox(
                              width: 20.0,
                            ),
                          ],
                        ),
                      )
                    ]),
              ),
            ));
      }
    }
    class Quote {
      String text;
      String author;
      Quote({String this.text, String this.author});
    }

【问题讨论】：

使用 Listview.builder
你也可以使用singlechildscrollview。
这能回答你的问题吗？ How to scroll page in flutter

标签： flutter dart

【解决方案1】：

请运行以下代码。我已经从您现有的代码中解决了这个问题，

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
  debugShowCheckedModeBanner: false,
  home: QuoteList(),
));
class QuoteList extends StatefulWidget {
  @override
  _QuoteListState createState() => _QuoteListState();
}
class _QuoteListState extends State<QuoteList> {
  List<Quote> quotes = [
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey[300],
        body: Container(
            width: double.infinity,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    Colors.black,
                    Colors.black,
                  ]),
            ),
            child: Padding(
              padding: EdgeInsets.fromLTRB(0.0, 3.0, 0.0, 3.0),
              child: SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: quotes
                      .map((quote) => QuoteCard(
                      quote: quote,
                      delete: () {
                        setState(() {
                          quotes.remove(quote);
                        });
                      }))
                      .toList(),
                ),
              ),
            )));
  }
}
class QuoteCard extends StatelessWidget {
  final Quote quote;
  final Function delete;
  QuoteCard({this.quote, this.delete});
  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: EdgeInsets.fromLTRB(0.0, 3.0, 0.0, 3.0),
        child: SingleChildScrollView(
          child: Container(
            child: Card(
              color: Colors.grey[800],
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Container(
                      child: Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: <Widget>[
                            SizedBox(
                              width: 20.0,
                            ),
                            Text(
                              '${quote.text}',
                              style: TextStyle(
                                fontSize: 18.0,
                                color: Colors.white,
                                letterSpacing: 3.0,
                              ),
                            ),
                          ]),
                    ),
                    ListTile(
                      title: Row(
                        children: <Widget>[
                          Expanded(
                              child: RaisedButton(
                                child: Text("delete"),
                                onPressed: delete,
                                color: Colors.grey[900],
                                textColor: Colors.white,
                                padding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
                              )),
                          SizedBox(
                            width: 20.0,
                          ),
                        ],
                      ),
                    )
                  ]),
            ),
          ),
        ));
  }
}
class Quote {
  String text;
  String author;
  Quote({String this.text, String this.author});
}

【讨论】：

【解决方案2】：

您可以使用 Listview.builder 使列表可滚动

【讨论】：

【解决方案3】：

使用 SingleChildScrollView 小部件。

有关 SingleChildScrollView 小部件的更多详细信息，请使用以下链接： https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

工作代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
      home: QuoteList(),
    ));
class QuoteList extends StatefulWidget {
  @override
  _QuoteListState createState() => _QuoteListState();
}
class _QuoteListState extends State<QuoteList> {
  List<Quote> quotes = [
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
    Quote(author: 'aaa', text: 'aaa'),
  ];
  @override
Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey[300],
        body: SingleChildScrollView(
        child: Container(
            width: double.infinity,
            decoration: BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [
                    Colors.black,
                    Colors.black,
                    ]),
            ),
            child: Padding(
                padding: EdgeInsets.fromLTRB(0.0, 3.0, 0.0, 3.0),
                child: Column(
                children: <Widget>[
                    Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: quotes
                        .map((quote) => QuoteCard(
                            quote: quote,
                            delete: () {
                                setState(() {
                                quotes.remove(quote);
                                });
                            }))
                        .toList(),
                    )
                ],
                ),
            )),
        ));
}
}
class QuoteCard extends StatelessWidget {
  final Quote quote;
  final Function delete;
  QuoteCard({this.quote, this.delete});
  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: EdgeInsets.fromLTRB(0.0, 3.0, 0.0, 3.0),
        child: Container(
          child: Card(
            color: Colors.grey[800],
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Container(
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          SizedBox(
                            width: 20.0,
                          ),
                          Text(
                            '${quote.text}',
                            style: TextStyle(
                              fontSize: 18.0,
                              color: Colors.white,
                              letterSpacing: 3.0,
                            ),
                          ),
                        ]),
                  ),
                  ListTile(
                    title: Row(
                      children: <Widget>[
                        Expanded(
                            child: RaisedButton(
                          child: Text("delete"),
                          onPressed: delete,
                          color: Colors.grey[900],
                          textColor: Colors.white,
                          padding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
                        )),
                        SizedBox(
                          width: 20.0,
                        ),
                      ],
                    ),
                  )
                ]),
          ),
        ));
  }
}
class Quote {
  String text;
  String author;
  Quote({String this.text, String this.author});
}

【讨论】：

【解决方案4】：

将您的硬币包裹在 SingleChildScrollview 中。它将使您的列表可滚动。喜欢

child: SingleChildScrollView(
          child: Container()
  )

【讨论】：