Flutter ListView横向滚动失效 SingleChildScrollView搭配Row也无法滚动如何解决

• 冗余的Wrap组件限制了内部Row的宽度，导致SingleChildScrollView的子元素宽度始终等于视口宽度，没有超出部分自然无法触发滚动
• 外层的Column组件对其子元素高度无约束，横向滚动组件未设置明确高度，导致布局计算异常

方案1：基于现有SingleChildScrollView修改 #

直接移除多余的Wrap组件，同时给SingleChildScrollView增加高度约束即可：

body: media.width < 1500
    // 用Expanded包裹占用Column剩余高度，也可以替换为SizedBox(height: xxx)指定固定高度
    ? Expanded(
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          // 直接放Row，去掉外层Wrap
          child: Row(
            children: [
              //1st Expansion Tile
              AttackExpansionTile(
                  title: Text('Malware Attacks'),
                  backgroundColor: Color(0xFF304e60),
                  collapsedColor: Color(0xFF304e60),
                  image: 'images/ransomware.png',
                  smallImage: 'images/malware.png',
                  subtitle: Text(
                      'Malware usage is up almost 800% since early 2020.'),
                  attackDefinition: Text(
                      "One of the most used type of malware is Ransomware.\n"
                      "Ransomware is a type of malware from cryptovirology that threatens to publish the victim's personal data or perpetually block access to it unless a ransom is paid."),
                  finalParagraph: Text(
                      "Ransomware is often spread through phishing emails that contain malicious attachments or through drive-by downloading. Drive-by downloading occurs when a user unknowingly visits an infected website and then malware is downloaded and installed without the user’s knowledge."
                      "Crypto ransomware, a malware variant that encrypts files, is spread through similar methods and has also been spread through social media, such as Web-based instant messaging applications."
                      " Additionally, newer methods of ransomware infection have been observed. For example, vulnerable Web servers have been exploited as an entry point to gain access to an organization’s network.")),

              //2nd Expansion Tile
              AttackExpansionTile(
                  title: Text('Phising'),
                  backgroundColor: Color(0xFF565462),
                  collapsedColor: Color(0xFF565462),
                  image: 'images/amazon.png',
                  smallImage: 'images/phishing.png',
                  subtitle: Text(
                      'Phishing attacks are the most common cause of data breaches globally and have'
                      ' been the root cause of notable instances of cybercrime in the last decade.'),
                  attackDefinition: Text(
                      'Phishing attacks attempt to steal information from users or trick them into downloading malware by'
                      'sending malicious emails or text messages (SMS) that look like real requests but are, in fact, a Scam.\n'),
                  finalParagraph: Text(
                      'It occurs when an attacker, masquerading as a trusted entity, dupes a victim into opening '
                      'an email, instant message, or text message. The recipient is then tricked into clicking a malicious link, '
                      'which can lead to the installation of malware, the freezing of the system as part of a ransomware attack '
                      'or the revealing of sensitive information.'
                      'An attack can have devastating results. For individuals, this includes unauthorized purchases, the stealing of funds, or identify theft.'))
            ],
          ),
        ),
      )
    : Container(),

方案2：使用横向ListView实现 #

如果要改用ListView，同样需要先给ListView加高度约束，配置滚动方向为横向即可：

body: media.width < 1500
    ? Expanded(
        child: ListView(
          scrollDirection: Axis.horizontal,
          children: [
            AttackExpansionTile(/* 第一个卡片的配置 */),
            AttackExpansionTile(/* 第二个卡片的配置 */),
          ],
        ),
      )
    : Container(),

• 所有在Column内部的可滚动组件，必须明确高度约束，要么用Expanded/Flexible占用剩余空间，要么用SizedBox/Container指定固定高度，否则会触发无限高度的布局异常
• 横向滚动的容器的子元素不需要设置宽度适配父级，内容宽度超出容器视口宽度即可触发滚动

内容的提问来源于stack exchange，提问作者EnCoder2000