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

颤振：容器内的垂直滚动

2 个答案: