美文网首页
flutter组件抽离思考

flutter组件抽离思考

作者: 小话001 | 来源:发表于2021-02-03 16:25 被阅读0次

源代码:


import 'package:flutter/material.dart';

main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:'app标题' ,
      home: HYHomePage(),
    );
  }
}

class HYHomePage extends StatefulWidget {
  @override
  _HYHomePageState createState() => _HYHomePageState();
}

class _HYHomePageState extends State<HYHomePage> {
  ScrollController _controller;
  bool _isShowTop=false;
  @override
  void initState() {
    // TODO: implement initState
    _controller=ScrollController();
    _controller.addListener(() {
      final tempOffSet=_controller.offset>=1000;
      if(tempOffSet!=_isShowTop){
        setState(() {
          _isShowTop=tempOffSet;
        });
      }
    });
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("标题"),
      ),
      body: ListView.builder(
        itemExtent: 50,
        itemCount: 100,
        controller: _controller,
        itemBuilder: (ctx,index){
           return ListTile(title: Text("第$index条,"),);
        }
        ),
      floatingActionButton: !_isShowTop ? null : FloatingActionButton(
        child: Icon(Icons.arrow_upward),
        onPressed: () {
          _controller.animateTo(0, duration: Duration(milliseconds: 1000), curve: Curves.ease);
        },
      ),
    );
  }
}

//思考:如果把BodyDemo抽离出来,此处是拿不到_controller的,应该怎么办?
//class BodyDemo extends StatelessWidget {
//  @override
//  Widget build(BuildContext context) {
//        return ListView.builder(
//        itemExtent: 50,
//        itemCount: 100,
//        controller: _controller,
//        itemBuilder: (ctx,index){
//           return ListTile(title: Text("第$index条,"),);
//        }
//     );
//  }
//}

//class BodyDemo extends StatefulWidget {
//  @override
//  _BodyDemoState createState() => _BodyDemoState();
//}
//
//class _BodyDemoState extends State<BodyDemo> {
//
//  @override
//  Widget build(BuildContext context) {
//    return ListView.builder(
//        itemExtent: 50,
//        itemCount: 100,
//        controller: this._controller,
//        itemBuilder: (ctx,index){
//           return ListTile(title: Text("第$index条"),);
//        }
//        );
//  }
//}

思考:怎么拿到_controller?

相关文章

  • flutter组件抽离思考

    源代码: 思考:怎么拿到_controller?

  • Vue-2

    组件模板的抽离写法 为什么组件data必须是函数

  • 组件19:抽离组件总结

    总结抽离组件要做的事情:一、建立索引仓库;二、建立组件仓库。 一、建立索引仓库 - 远程:(github、Codi...

  • Vue 组件抽离写法

    组件抽取模板 一、通过Script标签抽取出来模板 二、通过 template标签方式抽离末班 三、注册模板

  • react 组件抽离,封装

    子组件 核心就是父组件给子组件传props,没啥好说的 父组件

  • Flutter - UI基础

    Flutter基础组件用Flutter构建漂亮的UI界面 - 基础组件篇Flutter滚动型容器组件 - List...

  • 2019-10-20 Fultter学习(五)Gridview组

    一、 Flutter 列表组件概述二、 Flutter GridView 组件的常用参数三、 Flutter Gr...

  • 组件抽离技巧总结笔记

    在项目中,对于组件的划分,我们一般会划分为业务组件和功能组件,也可以称为视图组件和容器组件。在vue中也被称为逻辑...

  • react 组件公共逻辑抽离

    react 组件公共逻辑抽离方式,主要为: mixin,早期实现方式,现已被 react废弃,这里不再介绍 HOC...

  • 公共组件抽离(render props)

    公共组件的实时鼠标位置 传递给子组件 结构 公共组件的render方法 把挂载props上的方法返回要渲染的容器 ...

网友评论

      本文标题:flutter组件抽离思考

      本文链接:https://www.haomeiwen.com/subject/rshmtltx.html