完成屏幕后，可以添加滚动条吗？

Question

你好吗？

嗯，我对 Flutter 很陌生，最近开始创建一个应用程序，我在其中插入了包含信息的卡片。但是，卡片的数量超过了正常的屏幕尺寸。解决方案是添加滚动条。在下面的代码中，我应该在哪里添加滚动条？我找不到合适的地方。我总是遇到与写作有关的问题。

 import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class analgesicos extends StatefulWidget {
  const analgesicos({Key? key}) : super(key: key);

  @override
  State<analgesicos> createState() => _analgesicosState();
}

class _analgesicosState extends State<analgesicos> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,

        appBar: AppBar(

        backgroundColor: Colors.teal,
        centerTitle: true,
        title: Text('Analgésicos',style: TextStyle(
        fontFamily: 'fonts/Quicksand-Light.ttf',
        fontSize: 22,

    ),),
    ),
      body: Container(
                child: (
        Column(crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Padding(padding: const EdgeInsets.only(top: 10, bottom: 10),),
          Container(width: 240.0,
            height: 42.0,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20.0),
              color: const Color(0xffc5fce1),
            ),
            child: SizedBox(
              child: Text(
                'Não-opióides',
                style: TextStyle(
                  fontFamily: 'Quicksand',
                  fontSize: 18,
                  color: Colors.black,
                  height: 1.7,
                ),
                textAlign: TextAlign.center,
              ),
            ),
          ),
          Divider(
height: 15),

          const Material(
            child: (const Card(
              child: ListTile(
                title: Text('Ácido acetilsalicílico'),
                subtitle: Text('''Apresentação: Comprimidos simples de 500 ou 650 mg
                Indicação: Antipirético e analgésico.
                Posologia odontológica: Uso interno (via oral)
                Tomar 1 comprimido de 6/6 horas.'''),
              ),
            )),
          ),

                    const Material(
            child: (const Card(
              color: Colors.white,
              child: ListTile(
                title: Text('Bula ANVISA'),
              ),
            )),
          ),
          const Material(
            child: (const Card(
              child: ListTile(
                title: Text('Dipirona sódica'),
                subtitle: Text('''Apresentação: Comprimidos simples de 500 e 1000 mg
Indicação: Dores leves ou moderadas, antipirético
Posologia odontológica: Uso interno (via oral)
Tomar 1 comprimido de 4/4 horas, não ultrapassando 4 g diárias..'''),
              ),
            )),
          ),

          const Material(
            child: (const Card(
              color: Colors.white,
              child: ListTile(
                title: Text('Bula ANVISA'),
              ),
            )),
          ),

          const Material(
            child: (const Card(
              color: Colors.white,
              child: ListTile(
                title: Text('Bula ANVISA'),
              ),
            )),
          ),
          const Material(
            child: (const Card(
              child: ListTile(
                title: Text('Dipirona sódica'),
                subtitle: Text('''Apresentação: Comprimidos simples de 500 e 1000 mg
Indicação: Dores leves ou moderadas, antipirético
Posologia odontológica: Uso interno (via oral)
Tomar 1 comprimido de 4/4 horas, não ultrapassando 4 g diárias..'''),
              ),
            )),
          ),

          const Material(
            child: (const Card(
              color: Colors.white,
              child: ListTile(
                title: Text('Bula ANVISA'),
              ),
            )),
          ),

        ],)
        ),

      ),
    );
  }
}

Answer 1

您应该用 SingleChildScrollView 包装 Scaffold() 的 body：

class _analgesicosState extends State<analgesicos> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.teal,
        centerTitle: true,
        title: Text(
          'Analgésicos',
          style: TextStyle(
            fontFamily: 'fonts/Quicksand-Light.ttf',
            fontSize: 22,
          ),
        ),
      ),
      body: SingleChildScrollView(
        child: Container(
          child: (Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Padding(
                padding: const EdgeInsets.only(top: 10, bottom: 10),
              ),
              Container(
                width: 240.0,
                height: 42.0,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20.0),
                  color: const Color(0xffc5fce1),
                ),
                child: SizedBox(
                  child: Text(
                    'Não-opióides',
                    style: TextStyle(
                      fontFamily: 'Quicksand',
                      fontSize: 18,
                      color: Colors.black,
                      height: 1.7,
                    ),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
              Divider(height: 15),
              const Material(
                child: (const Card(
                  child: ListTile(
                    title: Text('Ácido acetilsalicílico'),
                    subtitle: Text(
                        '''Apresentação: Comprimidos simples de 500 ou 650 mg
                  Indicação: Antipirético e analgésico.
                  Posologia odontológica: Uso interno (via oral)
                  Tomar 1 comprimido de 6/6 horas.'''),
                  ),
                )),
              ),
              const Material(
                child: (const Card(
                  color: Colors.white,
                  child: ListTile(
                    title: Text('Bula ANVISA'),
                  ),
                )),
              ),
              const Material(
                child: (const Card(
                  child: ListTile(
                    title: Text('Dipirona sódica'),
                    subtitle: Text(
                        '''Apresentação: Comprimidos simples de 500 e 1000 mg
Indicação: Dores leves ou moderadas, antipirético
Posologia odontológica: Uso interno (via oral)
Tomar 1 comprimido de 4/4 horas, não ultrapassando 4 g diárias..'''),
                  ),
                )),
              ),
              const Material(
                child: (const Card(
                  color: Colors.white,
                  child: ListTile(
                    title: Text('Bula ANVISA'),
                  ),
                )),
              ),
              const Material(
                child: (const Card(
                  color: Colors.white,
                  child: ListTile(
                    title: Text('Bula ANVISA'),
                  ),
                )),
              ),
              const Material(
                child: (const Card(
                  child: ListTile(
                    title: Text('Dipirona sódica'),
                    subtitle: Text(
                        '''Apresentação: Comprimidos simples de 500 e 1000 mg
Indicação: Dores leves ou moderadas, antipirético
Posologia odontológica: Uso interno (via oral)
Tomar 1 comprimido de 4/4 horas, não ultrapassando 4 g diárias..'''),
                  ),
                )),
              ),
              const Material(
                child: (const Card(
                  color: Colors.white,
                  child: ListTile(
                    title: Text('Bula ANVISA'),
                  ),
                )),
              ),
            ],
          )),
        ),
      ),
    );
  }
}