Flutter教學(xué)目錄持續(xù)更新中

Github源代碼持續(xù)更新中

1.SingleChildScrollView介紹

有一個子widget的可滾動的widget，子內(nèi)容超過父容器時可以滾動。

2.SingleChildScrollView屬性

• scrollDirection = Axis.vertical：滑動方向
• reverse = false：是否倒序
• padding：內(nèi)邊距
• primary：當(dāng)內(nèi)容不足以滾動時，是否支持滾動；
• physics：控制用戶滾動視圖的交互
• controller：滑動控制器
• child：

3.使用

  ScrollController _scrollController;

  @override
  void initState() {
    _scrollController = ScrollController();
    _scrollController.addListener(() {
      print('_scrollController ${_scrollController.offset}');
    });
    super.initState();
  }

  _myChildren() {
    return [
      Container(
        height: 300,
        color: Colors.blue,
      ),
      Container(
        height: 300,
        color: Colors.yellow,
      ),
      Container(
        height: 300,
        color: Colors.red,
      ),
      Container(
        height: 300,
        color: Colors.green,
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SingleChildScrollView'),
      ),
      body: SingleChildScrollView(
        controller: _scrollController,
        reverse: true,
        child: ListBody(
          children: _myChildren(),
        ),
        restorationId: 's1',
      ),
    );
  }

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

image.png

Flutter教學(xué)目錄持續(xù)更新中

Github源代碼持續(xù)更新中