Flutter：容器內垂直滾動

Question

如何添加滾動以使多個文本答案可滾動？ 我曾嘗試使用 SingleChildScrollView 但無法滾動工作，文本答案消失並且頁面不滾動。

class Answer extends StatelessWidget {
  final Function selectHandler;
  final String answerText;

  Answer(this.selectHandler, this.answerText);

  @override
Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      margin: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 0),
      child: RaisedButton(
        padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 16.0),
        color: Color(0xfff4f4f4),
        textColor: Color(0xff3a3535),
        child: Text(answerText, style: TextStyle(
            fontFamily: 'VT323', fontSize: 22)),
        onPressed: selectHandler,
      ),
      decoration: BoxDecoration(
        // color: Color.fromARGB(255, 238, 238, 238),
        boxShadow: [
          BoxShadow(offset: Offset(10, 10),color: Color.fromARGB(80, 0, 0, 0),blurRadius: 10),
          BoxShadow(offset: Offset(-10, -10),color: Color.fromARGB(150, 255, 255, 255),blurRadius: 10)
        ],
      ),
    );
  }
}

ListView.builder 在這里我收到以下錯誤：

“類型‘字符串’不是‘列表’類型的子類型

class Answer extends StatelessWidget {
  final Function selectHandler;
  final List<String> answerText;

  Answer(this.selectHandler, this.answerText);

  @override
Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: 60.0,
        width: double.infinity,
        margin: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 0),
        decoration: BoxDecoration(
          // color: Color.fromARGB(255, 238, 238, 238),
          boxShadow: [
            BoxShadow(
                offset: Offset(10, 10),
                color: Color.fromARGB(80, 0, 0, 0),
                blurRadius: 10),
            BoxShadow(
              offset: Offset(-10, -10),
              color: Color.fromARGB(150, 255, 255, 255),
              blurRadius: 10,
            ),
          ],
        ),
        child: ListView.builder(
          itemBuilder: _buildAnswerItem,
          itemCount: answerText.length,
        ),
      ),
    );
  }
  Widget _buildAnswerItem( BuildContext context, int index) {
    return RaisedButton(
      padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 16.0),
      color: Color(0xfff4f4f4),
      textColor: Color(0xff3a3535),
      child: Text(answerText[index],
          style: TextStyle(fontFamily: 'VT323', fontSize: 22)),
      onPressed: selectHandler,
    );
  }
}

Answer 1

我設法通過在另一個級別添加 SingleChildScrollView 來找到啟用滾動的解決方案：

 appBar: AppBar(
        backgroundColor: Color(0xfff4f4f4),
        brightness: Brightness.light,
        title: Text('...', style: TextStyle(
            fontFamily: 'VT323',
            fontSize: 30,
            color: Color(0xffff7315)),),
      ),
      body: SingleChildScrollView(

而不是嘗試在此處添加 SingleChildScrollView：

return Container(
      width: double.infinity,
      margin: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 0),
      child: RaisedButton(
        padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 16.0),
        color: Color(0xfff4f4f4),
        textColor: Color(0xff3a3535),

這在我的應用程序的兩個不同部分中非常有效。

Answer 2

嘗試使用 ListView：

Widget build(BuildContext context) {
return Container(
  height: 100.0,
  width: double.infinity,
  margin: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 0),
  decoration: BoxDecoration(
    // color: Color.fromARGB(255, 238, 238, 238),
    boxShadow: [
      BoxShadow(
          offset: Offset(10, 10),
          color: Color.fromARGB(80, 0, 0, 0),
          blurRadius: 10),
      BoxShadow(
        offset: Offset(-10, -10),
        color: Color.fromARGB(150, 255, 255, 255),
        blurRadius: 10,
      ),
    ],
  ),
  child: ListView(
    children: <Widget>[
      RaisedButton(
        padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 16.0),
        color: Color(0xfff4f4f4),
        textColor: Color(0xff3a3535),
        child: Text(answerText,
            style: TextStyle(fontFamily: 'VT323', fontSize: 22)),
        onPressed: () {},
      ),
    ],
  ),
);
}

帶有 ListView.builder 的代碼：

List<String> answers = [
"Answer1",
"Answer2",
"Answer3",
"Answer4",
"Answer5",
"Answer6",
"Answer7"
];

@override
Widget build(BuildContext context) {
return Scaffold(
  body: Container(
    height: 60,
    margin: EdgeInsets.only(top: 25.0),
    width: double.infinity,
    color: Colors.green,
    child: ListView.builder(
      itemCount: answers.length,
      itemBuilder: (BuildContext context, int index) {
        return Container(
          margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
          child: RaisedButton(
            padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 16.0),
            color: Color(0xfff4f4f4),
            textColor: Color(0xff3a3535),
            child: Text(
              answers[index],
              style: TextStyle(
                fontFamily: 'VT323',
                fontSize: 22,
              ),
            ),
            onPressed: () {
              print("Answer $index tapped");
            },
          ),
        );
      },
    ),
  ),
);
}