一步一步完成Flutter应用开发-掘金App搜索，我的，发现，发布沸点

这次打算把剩余的3个tab页面构建一下，这几个页面比较简单一点，没有需要注意的地方，就简单写写怎么构建页面，说说自己的思路

单独拿小册页面为例 看下下面的结构可以分成3部分

左部分是小册的封面预览图，中间部分是名称，作者名称，等级，章节数，阅读数。最右部分是价格 大体结构是：

Row(
 children: [
   Container(),
   Column(
     children: [
         Text(),
         Row(
           children: [
               Text(),
               Text(),
           ]
         )
     ],
   Container(
     child: Text(),
   )
 ),
 ]
)

剩下的就是写样式了。 还有一点在发布沸点需要选择系统相册使用的是wechat_assets_picker 视频和图片都可以选择。这个库集成看一下大神的github就好了 配合使用flutter_luban 压缩图片，举个例子如下：

AssetPicker.pickAssets(context,
                        maxAssets: 1, pathThumbSize: 1, previewThumbSize: [1])
                    .then((List<AssetEntity> assets) async {
                  print(assets.first.file);
                  if (assets.length > 0) {
                    AssetEntity asset = assets.first;
                    File file = await asset.file;
                    print(file);
                    File image = file;
                    if (image == null) {
                      return;
                    }
                    CompressObject compressObject = CompressObject(
                        imageFile: image, //image
                        path: image.path,
                        quality: 50 //compress to path
                        );
                    Luban.compressImage(compressObject).then((_path) async {
                     
                    }).catchError((onError) => {print(onError)});

                    
                  }

iOS别忘了在info.plist文件加上权限请求的配置

<key>NSAppTransportSecurity</key>
<dict>
	<key>NSAllowsArbitraryLoads</key>
	<true/>
</dict>
<key>NSPhotoLibraryUsageDescription</key>
<string>Replace with your permission description.</string>

还有最后一个功能是点击添加链接功能, 效果如下：

实现思路是使用stack布局和offstage实现显示和隐藏

stack(
children: [
Positioned(
                bottom: 0,
                child: Offstage(
                  offstage: isShowLink,
                  child: InkWell(
                    onTap: () {
                      setState(() {
                        isShowLink = true;
                      });
                    },
                    child: Container(
                      margin: EdgeInsets.symmetric(horizontal: 20),
                      child: Icon(
                        Icons.link_sharp,
                        size: 40,
                        color: Colors.blue,
                      ),
                    ),
                  ),
                )),
 // 展示输入框
 Positioned(
                bottom: 0,
                child: Offstage(
                    offstage: !isShowLink,
                    child: Container(
                      height: 110,
                      width: Get.width,
                      decoration: BoxDecoration(color: Colors.white),
                      child: Column(
                        children: [
                          Container(
                            padding: EdgeInsets.symmetric(horizontal: 20),
                            margin: EdgeInsets.symmetric(
                                horizontal: 20, vertical: 5),
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(20),
                                border:
                                    Border.all(color: Colors.blue, width: 1)),
                            child: TextField(
                              autofocus: true,
                              onSubmitted: (value) {},
                              decoration: InputDecoration(
                                hintStyle: TextStyle(fontSize: 18),
                                hintText: '请输入链接地址',
                              ),
                              style:
                                  TextStyle(fontSize: 14, color: Colors.grey),
                            ),
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              FlatButton(
                                  onPressed: () {
                                    setState(() {
                                      isShowLink = false;
                                    });
                                  },
                                  child: Text('取消')),
                              FlatButton(
                                  onPressed: () {
                                    setState(() {
                                      isShowLink = false;
                                    });
                                  },
                                  child: Text('完成')),
                            ],
                          )
                        ],
                      ),
                    )))
]
)

over～～～～