Flutter技术问题：如何让容器组件支持滚动？

嘿，我来帮你搞定这个滚动的问题～你现在的代码里用的是Column组件，它本身不支持滚动，当内容超出屏幕高度时就会出现溢出问题，没法滚动查看全部内容。要实现滚动效果，最简单的方法是用SingleChildScrollView把你的Column包裹起来。

修改后的完整代码： #

double c_width = MediaQuery.of(context).size.width;
return new Container (
  padding: const EdgeInsets.all(16.0),
  width: c_width,
  // 用SingleChildScrollView包裹Column，实现滚动
  child: SingleChildScrollView(
    child: new Column (
      children: <Widget>[
        Row(
          children: <Widget>[
            new Text('DRN',style: TextStyle(color: Colors.black, fontSize: 20.0),),
            new Text('1', style: TextStyle(color: Colors.red, fontSize: 20.0),),
            new Text(': The Sound Of Indie',style: TextStyle(color: Colors.black, fontSize: 20.0),)
          ],
        ),
        Column (
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(8.0),
              child: Text ("When it comes to listening to music in this digital world there are so many ways to do it, either via YouTube, iTunes, Spotify, Google Music or the old fashioned Radio, where you get the commercial artists forced at you over and over again.", textAlign: TextAlign.left),
            ),
            Padding(
              padding: EdgeInsets.all(8.0),
              child: Text ("DRN1 is different. We are proud to show real talent, and artists that listeners may never of heard before but will quickly fall in love with. Sure, the music might not get publicised by major labels, and may not have the budget to get old styled radio stations playing. But, why should music come down to how much money you can throw at an artist just to hope that the listeners will end up buying said track or album?", textAlign: TextAlign.left),
            ),
          ],
        ),
        Row(
          children: <Widget>[
            new Text('The Sound of ',style: TextStyle(color: Colors.black, fontSize: 20.0),),
            new Text('Life', style: TextStyle(color: Colors.red, fontSize: 20.0),),
          ],
        ),
        Column (
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(8.0),
              child: Text ("When it comes to listening to music in this digital world there are so many ways to do it, either via YouTube, iTunes, Spotify, Google Music or the old fashioned Radio, where you get the commercial artists forced at you over and over again.", textAlign: TextAlign.left),
            ),
            Padding(
              padding: EdgeInsets.all(8.0),
              child: Text ("DRN1 is different. We are proud to show real talent, and artists that listeners may never of heard before but will quickly fall in love with. Sure, the music might not get publicised by major labels, and may not have the budget to get old styled radio stations playing. But, why should music come down to how much money you can throw at an artist just to hope that the listeners will end up buying said track or album?", textAlign: TextAlign.left),
            ),
          ],
        ),
        Row(
          children: <Widget>[
            new Text('The Sound of ',style: TextStyle(color: Colors.black, fontSize: 20.0),),
            new Text('Life', style: TextStyle(color: Colors.red, fontSize: 20.0),),
          ],
        ),
        Column (
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(8.0),
              child: Text ("When it comes to listening to music in this digital world there are so many ways to do it, either via YouTube, iTunes, Spotify, Google Music or the old fashioned Radio, where you get the commercial artists forced at you over and over again.", textAlign: TextAlign.left),
            ),
            Padding(
              padding: EdgeInsets.all(8.0),
              child: Text ("DRN1 is different. We are proud to show real talent, and artists that listeners may never of heard before but will quickly fall in love with. Sure, the music might not get publicised by major labels, and may not have the budget to get old styled radio stations playing. But, why should music come down to how much money you can throw at an artist just to hope that the listeners will end up buying said track or album?", textAlign: TextAlign.left),
            ),
          ],
        ),
      ],
    ),
  ),
);

原理说明： #

• SingleChildScrollView是Flutter提供的基础滚动容器，它会在子组件超出父容器的视口范围时，允许用户垂直（默认）或水平滚动查看全部内容。
• 因为你的内容是固定的一组组件，用SingleChildScrollView包裹Column是最直接的方案。如果你的内容是动态生成的列表，也可以考虑用ListView，但对于这种静态内容，SingleChildScrollView更合适。

另外还要注意，如果你的Column里有使用Expanded或Flexible组件，需要调整一下，因为SingleChildScrollView会让子组件尽可能占用需要的空间，Expanded这类依赖父容器约束的组件可能会失效，不过你的代码里没有这类组件，所以直接套用就没问题啦～

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