flutter弹框怎么封装_【无聊的编码】如何用Flutter制作底部弹框

大家好~这里依然是。。无聊的编码，上一期我们尝试使用一个小时的时间来复制抖音首页，这一期开始，我们将把重心放在功能的实现上。比如Flutter制作翻版抖音​www.bilibili.com如何利用Provider进行状态管理

如何设置底部带动画效果的弹框

如何设置可滚动的循环列表

如何在循环列表中增加二级循环列表

听起来有些混乱？先看一下效果图。还没做精修，就。。看效果吧。。如何设置Provider

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

首先定义即将使用的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(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一定会报错，超出长度。

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

SingleChildScrollView(

controller: controller, //控制器 child: Container(

child: Column(

mainAxisSize: MainAxisSize.min,

children: [

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吧。如何设置二级循环

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

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

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

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