Flutter 实现钉钉消息列表效果(一)

Flutter 环境安装

• 可以参考 Flutter 官网步骤进行安装搭建

实现效果如图

创建 Fluter 项目 flutter_dingtalk

• 创建 DTMainScreen 主布局，使用 PageView 加载显示和切换视图
• PageView 添加（DTMessageScreen、DTDocumentScreen、DTWorksetScreen、DTAddressListScreen、DTDiscoveryScreen）视图
• 列表页显示的信息放在 DTMessageScreen 中显示

创建 DTMainScreen，构建主要布局

• 添加对应视图

  int _selectedIndex = 0;
  List<Widget> _mainBodies = [];
  
  PageController _mainPageController;
  
  @override
  void initState() {
    _mainPageController =
      PageController(initialPage: _selectedIndex, keepPage: true);
  
    _mainBodies
      ..add(DTMessageScreen())
      ..add(DTDocumentScreen())
      ..add(DTWorksetScreen())
      ..add(DTAddressListScreen())
      ..add(DTDiscoveryScreen());
    super.initState();
  }
  
  ....
  
  PageView _buildPageView() {
      return PageView(
        children: _mainBodies,
        pageSnapping: false,
        physics: NeverScrollableScrollPhysics(),
        controller: _mainPageController,
      );
    }
  ....
  

• 重写 build 方法

   @override
    Widget build(BuildContext context) {
      // 使用 ScreenUtil 进行屏幕适配
      ScreenUtil.init(context, width: 750, height: 1334);
      super.build(context);
      return Scaffold(
        // 加载显示 PageView 主题内容
        body: _buildPageView(),
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
        ),
      );
    }
  

• 设置底部导航 bottomNavigationBar

        // 设置底部导航
        bottomNavigationBar: BottomNavigationBar(
          selectedLabelStyle:
              TextStyle(color: kTabSelectedColor, fontSize: kSize22),
          unselectedLabelStyle:
              TextStyle(color: kTabNormalColor, fontSize: kSize22),
          type: BottomNavigationBarType.fixed,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
                title: Text('消息'),
                icon: SvgPicture.asset(
                  'assets/icons/icon_message.svg',
                  width: kSize48,
                  color: _getBarItemColor(0),
                )),
            BottomNavigationBarItem(
                title: Text('文档'),
                icon: SvgPicture.asset(
                  'assets/icons/icon_document.svg',
                  width: kSize48,
                  color: _getBarItemColor(1),
                )),
            BottomNavigationBarItem(
                title: Text('工作'),
                icon: SvgPicture.asset(
                  'assets/icons/icon_workset.svg',
                  width: kSize48,
                  color: _getBarItemColor(2),
                )),
            BottomNavigationBarItem(
                title: Text('通讯录'),
                icon: SvgPicture.asset(
                  'assets/icons/icon_address_list.svg',
                  width: kSize48,
                  color: _getBarItemColor(3),
                )),
            BottomNavigationBarItem(
                title: Text('发现'),
                icon: SvgPicture.asset(
                  'assets/icons/icon_discovery.svg',
                  width: kSize48,
                  color: _getBarItemColor(4),
                )),
          ],
  

代码地址： gitee.com/shizidada/f…