Flutter（二十二）SingleChildScrollVie

Flutter提供的滚动widget，类似于Android中的ScrollView。

属性

• this.scrollDirection = Axis.vertical,//滚动的方向，垂直或水平
• this.reverse = false,// 是否反转，如果是垂直滚动的话，reverse默认为false，表示先看上面。如果reverse为true，则先看底部。
• this.padding,// 内边距
• bool primary,// 是否使用默认的controller
• this.physics,
• this.controller,//可以控制初始的偏移量
• this.child

垂直方向：

image.png

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    List<String> list = <String>[];
    for (var i = 0; i < 150; i++) {
      list.add(i.toString());
    }
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        reverse: true,
        padding: EdgeInsets.all(20),
        primary: false,
        child: Center(
          child: Column(
            children: list
                .map((item) => Text(
                      item,
                      style: TextStyle(fontSize: 16),
                    ))
                .toList(),
          ),
        ),
        controller: ScrollController(initialScrollOffset: 120,keepScrollOffset: true),
      ),
    );
  }
}

水平方向：

image.png

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    List<String> list = <String>[];
    for (var i = 0; i < 150; i++) {
      list.add(i.toString());
    }
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        reverse: true,
        padding: EdgeInsets.all(20),
        primary: false,
        child: Center(
          child: Row(
            children: list
                .map((item) => Text(
                      item,
                      style: TextStyle(fontSize: 16),
                    ))
                .toList(),
          ),
        ),
        controller: ScrollController(initialScrollOffset: 120,keepScrollOffset: true),
      ),
    );
  }
}