31Flutter SingleChildScrollView

SingleChildScrollView

ScrollView 是一个抽象类 不可以直接实例化
SingleChildScrollView类似于开发中常用的ScrollView

1.属性

 	Key key,
    this.scrollDirection = Axis.vertical, //方向
    this.reverse = false,
    this.padding, 
    bool primary,
    this.physics,  //BouncingScrollPhysics 滑动最后样式
    this.controller,
    this.child,
    this.dragStartBehavior = DragStartBehavior.start,
    this.clipBehavior = Clip.hardEdge,
    this.restorationId,

2.使用

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // home: CustomScrollViewDemo(),
      home: Scaffold(
        body: ScrollViewDemo(),
      ),
    );
  }
}

class ScrollViewDemo extends StatefulWidget {
  ScrollViewDemo({Key key}) : super(key: key);

  @override
  _ScrollViewDemoState createState() {
    return _ScrollViewDemoState();
  }
}

class _ScrollViewDemoState extends State<ScrollViewDemo> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return buildScrollview2();
  }

  ///竖直滑动
  Widget buildScrollView() {
    return SingleChildScrollView(
      //滑动的方向 Axis.vertical为垂直方向滑动，Axis.horizontal 为水平方向
      scrollDirection: Axis.vertical,
      //true 滑动到底部
      reverse: false,
      padding: EdgeInsets.all(0.0),
      physics: BouncingScrollPhysics(),
      child: Center(
        child: Column(
          children: <Widget>[
            Container(
              color: Colors.red,
              margin: EdgeInsets.only(top: 10),
              height: 440,
            ),
            Container(
              color: Colors.green,
              margin: EdgeInsets.only(top: 10),
              height: 540,
            ),
          ],
        ),
      ),
    );
  }

  ///水平方向滑动
  Widget buildScrollview2() {

    return  SingleChildScrollView(
      //滑动的方向 Axis.vertical为垂直方向滑动，Axis.horizontal 为水平方向
      scrollDirection: Axis.horizontal,
      //true 滑动到底部
      reverse: false,
      padding: EdgeInsets.all(0.0),
      //滑动到底部回弹效果
      physics: BouncingScrollPhysics(),
      child: Center(
        child: Row(
          children: <Widget>[
            Container(color: Colors.red ,margin: EdgeInsets.only(top: 10),width: 440,height: 200,),
            Container(color: Colors.green ,margin: EdgeInsets.only(top: 10),width: 540,height: 200,),
          ],
        ),
      ),
    );
  }
}

3.SingleChildScrollView 进行滚动布局，实现和 Warp 和LiestView 组合的效果

如何解决冲突问题

SingleChildScrollView，ListView,GrilView嵌套问题解决，子布局添加属性]

physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,

解答：在Flutter中，ScrollView嵌套ListView，点击ListView是滑动ListView的，滑动其他区域，是滑动ScrollView，滑动ListView区域，是滑动ListView,

注意在Android原生代码中，ScrollView会阻塞ListView的滑动，二者在这一块有所不同

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // home: CustomScrollViewDemo(),
      home: Scaffold(
        body: ScrollViewDemo(),
      ),
    );
  }
}

class ScrollViewDemo extends StatefulWidget {
  ScrollViewDemo({Key key}) : super(key: key);

  @override
  _ScrollViewDemoState createState() {
    return _ScrollViewDemoState();
  }
}

class _ScrollViewDemoState extends State<ScrollViewDemo> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return buildScrollView();
  }

  ///竖直滑动
  Widget buildScrollView() {
    return SingleChildScrollView(
      //滑动的方向 Axis.vertical为垂直方向滑动，Axis.horizontal 为水平方向
      scrollDirection: Axis.vertical,
      //true 滑动到底部
      reverse: false,
      padding: EdgeInsets.all(0.0),
      physics: BouncingScrollPhysics(),
      child: Center(
        child: Column(
          children: <Widget>[
            Container(
              color: Colors.red,
              margin: EdgeInsets.only(top: 10),
              height: 440,
              child: HomeContent(),
            ),
            Container(
              color: Colors.green,
              margin: EdgeInsets.only(top: 10),
              height: 540,
            ),
          ],
        ),
      ),
    );
  }

  ///水平方向滑动
  Widget buildScrollview2() {

    return  SingleChildScrollView(
      //滑动的方向 Axis.vertical为垂直方向滑动，Axis.horizontal 为水平方向
      scrollDirection: Axis.horizontal,
      //true 滑动到底部
      reverse: false,
      padding: EdgeInsets.all(0.0),
      //滑动到底部回弹效果
      physics: BouncingScrollPhysics(),
      child: Center(
        child: Row(
          children: <Widget>[
            Container(color: Colors.red ,margin: EdgeInsets.only(top: 10),width: 440,height: 200,),
            Container(color: Colors.green ,margin: EdgeInsets.only(top: 10),width: 540,height: 200,),
          ],
        ),
      ),
    );
  }
}


class HomeContent extends StatelessWidget {

  List list=new List();
  HomeContent(){
    for(var i=0;i<20;i++){
      this.list.add('我是第$i条');
    }
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
        itemCount:this.list.length,
        itemBuilder:(context,index){
          return ListTile(
            title: Text(this.list[index]),
          );
        }
    );
  }
}