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

实现效果如图

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

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

创建 DTMainScreen，构建主要布局
  • 添加对应视图 ```dart int _selectedIndex = 0; List _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, ); } ….

  3. - 
  4. 重写 build 方法
  5. ```dart
  6.  @override
  7.   Widget build(BuildContext context) {
  8.     // 使用 ScreenUtil 进行屏幕适配
  9.     ScreenUtil.init(context, width: 750, height: 1334);
  10.     super.build(context);
  11.     return Scaffold(
  12.       // 加载显示 PageView 主题内容
  13.       body: _buildPageView(),
  14.         currentIndex: _selectedIndex,
  15.         onTap: _onItemTapped,
  16.       ),
  17.     );
  18.   }
  • 设置底部导航 bottomNavigationBar
    1.     // 设置底部导航
    2.     bottomNavigationBar: BottomNavigationBar(
    3.       selectedLabelStyle:
    4.           TextStyle(color: kTabSelectedColor, fontSize: kSize22),
    5.       unselectedLabelStyle:
    6.           TextStyle(color: kTabNormalColor, fontSize: kSize22),
    7.       type: BottomNavigationBarType.fixed,
    8.       items: <BottomNavigationBarItem>[
    9.         BottomNavigationBarItem(
    10.             title: Text('消息'),
    11.             icon: SvgPicture.asset(
    12.               'assets/icons/icon_message.svg',
    13.               width: kSize48,
    14.               color: _getBarItemColor(0),
    15.             )),
    16.         BottomNavigationBarItem(
    17.             title: Text('文档'),
    18.             icon: SvgPicture.asset(
    19.               'assets/icons/icon_document.svg',
    20.               width: kSize48,
    21.               color: _getBarItemColor(1),
    22.             )),
    23.         BottomNavigationBarItem(
    24.             title: Text('工作'),
    25.             icon: SvgPicture.asset(
    26.               'assets/icons/icon_workset.svg',
    27.               width: kSize48,
    28.               color: _getBarItemColor(2),
    29.             )),
    30.         BottomNavigationBarItem(
    31.             title: Text('通讯录'),
    32.             icon: SvgPicture.asset(
    33.               'assets/icons/icon_address_list.svg',
    34.               width: kSize48,
    35.               color: _getBarItemColor(3),
    36.             )),
    37.         BottomNavigationBarItem(
    38.             title: Text('发现'),
    39.             icon: SvgPicture.asset(
    40.               'assets/icons/icon_discovery.svg',
    41.               width: kSize48,
    42.               color: _getBarItemColor(4),
    43.             )),
    44.       ],

代码地址： https://gitee.com/shizidada/flutter_dingtalk/blob/master/lib/ui/screens/main/main_screen.dart