c7f9d48d32f52e2f4d73049eaafdd062.png

大家好~这里依然是。。无聊的编码，上一期我们尝试使用一个小时的时间来复制抖音首页，这一期开始，我们将把重心放在功能的实现上。比如

Flutter制作翻版抖音​www.bilibili.com
  • 如何利用Provider进行状态管理
  • 如何设置底部带动画效果的弹框
  • 如何设置可滚动的循环列表
  • 如何在循环列表中增加二级循环列表

听起来有些混乱？先看一下效果图。

ccf108b0386051e8cc36bf5551573984.png
还没做精修，就。。看效果吧。。
如何设置Provider

作为Flutter官方推荐的状态管理工具，Provider可以算得上简单又好用了。只需几步基本的配置，就可以很大情况下摆脱StatefulWidget的束缚（哪些还得用StatefulWidget呢？），将状态管理这样的“复杂”工程，简单化。

c0364b492a9f2a2158983c139b05ca02.png

首先定义即将使用的Provider

class MainProvider with ChangeNotifier {
 XXXX
}

在即将使用到Provider的组件父级，通过MultiProvider进行声明，比如我即将要在ChildWidget中使用MainProvider，那么需要如何设置呢？

class ParentWidget extends StatelessWidget {
  const ParentWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: MultiProvider(
        providers: [ChangeNotifierProvider(builder: (context)=>MainProvider(),)],
        child: ChildWidget()
      ),
    );
  }
}

class ChildWidget extends StatelessWidget {
  const ChildWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    MainProvider provider=Provider.of<MainProvider>(context);
    return Container(
      child: Container(),
    );
  }
}

经过如此父级组件的注册声明，以及子组件的具体调用，就可以轻松的获取Provider中数据，方法，并对他进行修改啦，注意加上NotifyListeners()。

如何设置底部弹框

Flutter已经很大程度上实现了各种高频率使用的功能，比如BottomSheet，也已经给出了非常好的实现。

想要弹框动画？想要非弹框区域灰色背景？想要点击非弹框区域让弹框消失？这些都不用自己实现啦~

只需要调用内置方法showModalBottomSheet()，就可以轻松解决。弹框内的Container可以高度定制，加圆角？加边框？加颜色？安排！

showModalBottomSheet(
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadiusDirectional.circular(10)), //加圆角
      context: context,
      builder: (_) {
        return MultiProvider(
          providers: [ChangeNotifierProvider(builder: (context)=>MainProvider(),)],
          
            child: Container(
              height: 600,  //定义高度
              child: Container()),
            )
          ;
      });
如何实现滚动列表

Flutter中，如果需要自定义滚动列表，则需要使用SingleChildScrollView，将可能会发生滚动的组件，嵌套在其之内就可以啦。

比如，我们可以将SingleChildScrollView套在Column组件的外层，就可以实现最基本的无限循环列表。如果不嵌套会怎么样？那么Column一定会报错，超出长度。

782bc40423aa859993bbb255981e99c1.gif

比如在抖音的回复列表里，我们就使用了两层嵌套。(更过源码请移步GitHub)

SingleChildScrollView(
        controller: controller, //控制器
        child: Container(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Container(
                height: 80 * rpx,
                child: ListTile(
                  leading: Container(
                    width: 10 * rpx,
                  ),
                  trailing: IconButton(
                    icon: Icon(Icons.close),
                    onPressed: () {},
                  ),
                  title: Center(child: Text("10条评论")),
                ),
              ),
              genReplyList(replies, controller)
            ],
          ),
        ));

但是在Flutter中，SingleChildScrollView与List View.builder均生成可无限滚动的列表，这样所导致的结果就是，对于整个区域以及其子区域，都是可进行独立滚动的。这就与我们的设计初衷有很大的差异。

别急，Flutter官方对于滚动效果，有其特殊的处理方式，也就是ScrollController组件。对于任意可滚动的组件，均可设置其controller，如果希望整屏同步滚动，将controller设置为同一对象即可，想玩分屏滚动？那就实例化不同的controller吧。

7f4d48e3034e344f978a803d01e05530.gif
如何设置二级循环

从实现的角度而言，与普通的循环并无太大的差异，只是我们需要更多的关注到数据的结构。比如当前所使用的回复列表

1篇视频-->多个回复-->同一回复多个子回复

面对如此的数据结构，我们自然也需要使用

1-->N-->N的实现方法。听起来乱了？视频课程也许更适合你哦~

Flutter来做个翻版抖音--视频课程

GitHub项目地址 flutter_douyin_demo

Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

浅谈 RN新架构与老架构

React Native新旧架构核心差异在于通信机制：旧架构通过Bridge进行异步JSON序列化通信，存在性能瓶颈；新架构基于JSI实现JS与Native直接同步调用，配合Fabric渲染器和TurboModules模块系统，显著提升性能。主要改进包括：消除序列化开销、支持同步通信、多线程安全渲染、按需加载模块。新架构自0.74版本逐渐成熟，0.76成为默认选项，为动画、手势等高性能场景提供更好

avatar 开源鸿蒙跨平台开发者社区

RN 0.63 双端冷启动线程流转

React Native 0.63旧架构下，Android和iOS冷启动流程遵循相同核心路径：主线程初始化→后台线程创建引擎/加载Bundle→JS线程执行→Shadow线程计算布局→主线程渲染。iOS使用4条线程/队列（主线程、GCD后台队列、JSThread、ShadowQueue），Android采用5条线程（主线程、AsyncTask、JSThread、ShadowThread和UIThr

avatar 开源鸿蒙跨平台开发者社区

RN线程模型

React Native 的线程架构通过隔离 JS 线程、Native Module 线程和 UI 主线程，解决了单线程限制与性能冲突问题。JS 线程独立运行避免阻塞 UI，Native 操作异步执行防止卡顿，而 UI 更新严格在主线程完成。这种设计虽引入异步通信的开销，但确保了流畅交互和高效渲染，是 RN 性能优化的核心机制。开发者需遵循线程规则，避免跨线程同步调用导致的死锁或性能问题。

avatar 开源鸿蒙跨平台开发者社区