Flutter_Day1

看到一个Demo.适合练手.所以稍加改动.作为Flutter_30的Day1吧!

Simulator Screen Shot - iPhone SE (2nd generation) - 2020-08-11 at 15.34.19.png

首先说一下底部的TabBar.

image.png

实际使用就是IndexedStack做页面的切换,
底部的Tabbar实际就是Scaffold容器里面的bottomNavigationBar.然后根据当前选中的更改样式以及切换界面!

Widget build(BuildContext context) {
   return Scaffold(
    body: IndexedStack(
    alignment: AlignmentDirectional.topStart,
    children: <Widget>[
      InstagramPage(),
     .....
    ],
  ),
  bottomNavigationBar: BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    items: [
      BottomNavigationBarItem(
        icon: Icon(
          Icons.home,
          color: _normalColor,
        ),
        title: Text(
          "首页",
          style: TextStyle(
              color: _currentIndex == 0 ? _selectColor : _normalColor,
              fontSize: 13),
        ),
        activeIcon: Icon(
          Icons.home,
          color: _selectColor,
        ),
      ),
    .....
  ],
    currentIndex: _currentIndex,
    onTap: (index) {
      setState(() {
        _currentIndex = index;
      });
    },
  ),
);

看一下中间的滑动视图.涉及垂直/水平布局以及Stack叠加布局.如图.

image.png

最后说一下图片的多种方式

加载一个本地沙盒/安卓相册图片.用法:

new Image.file(new File('储存链接'))

加载网络图片的用户:

NetworkImage(url)
Image.network(url)

加载带占位视图的图片:
1.本地Asset管理的占位图:

new FadeInImage.assetNetwork(
   placeholder: 'images/logo.png',
   image: imageUrl,
   fit: BoxFit.fill,
 )

2.缓存中的占位图

new FadeInImage.memoryNetwork(
  placeholder: kTransparentImage,
  image: imageUrl, 
  fit: BoxFit.fill,
)

另外还有第三方插件cached_network_image.在加载时占位widget.在加载失败时能展示widget.

new CachedNetworkImage(
   fit: BoxFit.fitWidth,
   placeholder: new CircularProgressIndicator(),
   imageUrl: imageUrl,
   errorWidget: new Icon(Icons.error),
)