在这个内容底板小部件里面要显示照片的拍摄相关的信息,还有用户的评论。我们可以在这里使用标签栏还有标签栏视图,这样用户可以很方便的切换要显示的内容。
post_bottom_sheet
在这个 post_bottom_sheet 里面,先声明一个 closeButton,它的功能就是关掉当前显示的底板,用一个 GestureDetector ,设置一下它的 onTap,点按的时候可以执行一下 Navigator.maybePop,提供一个 context 。小部件的 child 是一个 Container,它的 child 可以是一个 Icon 小部件,用的小图标是 Icons.close,把小图标的 size 设置成 16。
TabController
下面声明一个 tabBar,它的值是一个 TabBar,在使用 TabBar 还有 TabBarView 的时候我们要提供一个控制器。这里我们需要把这个内容底板小部件转换成一个 StatefulWidget,然后让这个 State 类使用一个 mixin,with TickerProviderStateMixin。
声明一个属性,用 late 标记一下,类型是 TabController ,名字是 tabController 。
添加一个 initState 方法,在方法里设置一下 tabController ,值可以新建一个 TabController ,用 length 设置一下标签的数量,设置成 2 ,还得再提供一个 vsync,设置成 this,然后是 initialIndex ,初始索引,设置成 0,也就是默认会显示第一个标签。
再添加一个 dispose 方法,在这个方法里执行一下 tabController.dispose() ,扔掉用不到的这个 TabController。
tabBar
继续再编辑这个 tabBar,设置一下 controller,值是 tabController,再用 padding ,把边距设置成 EdgeInsets.all ,8,然后可以把 isScrollable 设置成 true,再把 indicatorWeight,设置成 1 。然后用 tabs 设置一组标签项目,添加一个 Tab,用 text 设置一下标签文字,信息,复制一份,再添加一个标签,标签文字是评论。
header
下面声明一个 header,它是一个 Row,这个 Row 的 children 里面添加一个 closeButton,再添加一个 tabBar 。
tabBarView
再准备一下标签栏视图,声明一个 tabBarView,新建一个 TabBarView ,用 controller 设置一下控制器,值是 tabController ,再设置一下它的 children ,它的值就是一组小部件,也就是每个标签对应要显示的小部件。暂时先添加两个小图标,要使用的小图标是 Icons.camera_outlined ,把小图标的 size 设置成 56 。复制一份,下面这个小图标用一下 quesition_answer_outlined 。
content
声明一个 content,值可以用一个 Expanded,它的 child 是一个 Container ,用 padding 设置一下边距,EdgeInsets.only,top 是 32,bottom 也是 32 ,child 是上面定义好的标签栏视图小图标,tabBarView。
在下面这个 Column 小部件里面,添加一个 header,再添加一个 content 。
预览
最后再预览一下这个内容底板。用户可以点击标签切换显示不同的标签内容,也可以用扫动手势切换显示标签内容。按一下关闭按钮可以关掉这个底板。