1、问题:

今天测试SingleChildScrollView的时候,发现在Column里面嵌套两个SingleChildScrollView时,第二个SingleChildScrollView无法滚动。

其他ScrollView应该也会出现类似问题。

2、问题图:

3、解决办法:

在无法滚动的SingleChildScrollView控件外面嵌套一个Expanded控件。

Expanded控件会自适应子控件大小,子控件有多大就有多大。

4、完整代码:

import 'package:flutter/material.dart';

class SingleChildScrollViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String str =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ";
    return Scaffold(
        // 显示进度条
        appBar: new AppBar(title: new Text("滚动控件")),
        body: Column(
          children: <Widget>[
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              padding: EdgeInsets.all(16.0),
              child: Center(
                child: Row(
                  //动态创建一个List<Widget>
                  children: str
                      .split("")
                      //每一个字母都用一个Text显示,字体为原来的两倍
                      .map((c) => Text(
                            c,
                            textScaleFactor: 2.0,
                          ))
                      .toList(),
                ),
              ),
            ),
            Expanded(
              child: SingleChildScrollView(
                scrollDirection: Axis.vertical,
                padding: EdgeInsets.all(16.0),
                child: Center(
                  child: Column(
                    //动态创建一个List<Widget>
                    children: str
                        .split("")
                        //每一个字母都用一个Text显示,字体为原来的两倍
                        .map((c) => Text(
                              c,
                              textScaleFactor: 2.0,
                            ))
                        .toList(),
                  ),
                ),
              ),
            )
          ],
        ));
  }
}

void main() {
  runApp(new MaterialApp(
    title: "滚动控件案例",
    theme: new ThemeData(primaryColor: Colors.deepOrangeAccent),
    home: new SingleChildScrollViewDemo(),
  ));
}

5、效果图: