AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

flutter:页面整合 (十)

2024-10-17 36
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文档介绍了如何在 Flutter 应用中使用底部导航栏（`BottomNavigationBar`）和侧边栏（`Drawer`），包括简单的使用方法、属性配置、与按钮结合使用、使用图片作为图标、以及如何实现顶部导航。示例代码展示了如何创建包含多个页面的导航栏，并通过 `TabController` 控制器实现页面切换。同时，文档还提供了如何自定义导航栏样式和添加浮动操作按钮（`FloatingActionButton`）的方法。最后，整合了底部导航栏、侧边栏和顶部导航栏的完整示例代码，帮助开发者快速构建具有导航功能的 Flutter 应用界面。

前言

在现代移动应用中，良好的导航体验是提升用户满意度的关键因素。Flutter提供了多种导航组件，包括底部导航栏（BottomNavigationBar）、侧边栏（Drawer）和顶部导航栏（AppBar），使开发者能够轻松创建直观且高效的应用界面。本文档将详细介绍如何在Flutter应用中实现这些导航组件，涵盖以下内容：

底部导航栏

简单使用

bottomNavigationBar: BottomNavigationBar(
            items:[
              BottomNavigationBarItem(
                  icon:Icon(Icons.home),
                 label:"hello"
              ),
              BottomNavigationBarItem(
                  icon:Icon(Icons.category),
                  label:"分类"
              ),
              BottomNavigationBarItem(
                  icon:Icon(Icons.settings),
                  label:"设置"
              ),
            ]
        ),

属性

bottomNavigationBar: BottomNavigationBar(
          //   图标大小
          iconSize: 40,
          //  图标 颜色
          fixedColor: Colors.red,
          // 如果 底部  按钮 四个或以上 需要使用到
          type: BottomNavigationBarType.fixed,
          // currentIndex  当前  显示 的  下标
          currentIndex: _currentIndex,
          //  点击事件
          onTap: (index){
            //  动态  的    需要加上  setState
            setState(() {
              _currentIndex=index;
            });
          },
          //  items   放   图标
          items:const [
            BottomNavigationBarItem(
                icon:Icon(Icons.home),
                label:"首页"
            ),

需要 加控制器


demo

先创建一个pages 文件夹

里面再创建一个tabs 文件夹

放入  home ,setting,user,category  等dart

tabs 文件夹下面 有  个  tabs.dart

user.dart      其他 的  都 为一样

import 'package:flutter/material.dart';
class UserPage extends StatefulWidget {
  const UserPage({Key? key}) : super(key: key);
  @override
  State<UserPage> createState() => _UserPageState();
}
class _UserPageState extends State<UserPage> {
  @override
  Widget build(BuildContext context) {
  return Center(
    child: Text("用户"),
  );
  }
}
import 'package:flutter/material.dart';
import './tabs/home.dart';   // 1
import './tabs/category.dart';  //2
import './tabs/setting.dart';  // 3
import './tabs/user.dart';
class Tabs extends StatefulWidget {
  const Tabs({Key? key}) : super(key: key);
  @override
  State<Tabs> createState() => _TabsState();
}
class _TabsState extends State<Tabs> {
  //  定义一个可  用来  记录  点击按钮的 变量
  int _currentIndex=0;
  // 将   4  个  组件  放入  到一个  list 中
  final List <Widget> _pages= const [
    HomePage(),
    CategoryPage(),
    SettingPage(),
    UserPage()
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('flutter demo'),),
      //    body  为  list  数组    下标  为  记录  的变量
      body: _pages[_currentIndex],
      //   底部 导航
      bottomNavigationBar: BottomNavigationBar(
          //   图标大小
          iconSize: 40,
          //  图标 颜色
          fixedColor: Colors.red,
          // 如果 底部  按钮 四个或以上 需要使用到
          type: BottomNavigationBarType.fixed,
          // currentIndex  当前  显示 的  下标
          currentIndex: _currentIndex,
          //  点击事件
          onTap: (index){
            //  动态  的    需要加上  setState
            setState(() {
              _currentIndex=index;
            });
          },
          //  items   放   图标  
          items:const [
            BottomNavigationBarItem(
                icon:Icon(Icons.home),
                label:"首页"
            ),
            BottomNavigationBarItem(
                icon:Icon(Icons.category),
                label:"分类"
            ),
            BottomNavigationBarItem(
                icon:Icon(Icons.settings),
                label:"设置"
            ),
            BottomNavigationBarItem(
                icon:Icon(Icons.people),
                label:"用户"
            ),
          ]
      ),
    );
  }
}

将 这个 引入 到 main.dart  中

import 'package:flutter/material.dart';
import './pages/tabs.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'flutter demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const Tabs(),
    );
  }
}


与按钮一起用

floatingActionButton

主要  调一下 位置  和  改变 颜色 与 显示  页面

floatingActionButton: Container(
        //  调整上下  位置
        margin: const EdgeInsets.only(top: 22),
        // 按钮  大小
        height: 62,
        width: 62,
        padding: const EdgeInsets.all(3),
        //   修饰边框
        decoration: BoxDecoration(
            color: Colors.black12, borderRadius: BorderRadius.circular(30)),
        child: FloatingActionButton(
          //   用  三元运算  符    改变   显示 颜色
          //  当 为  两种  状态  时  多用  这个
          backgroundColor: _currentIndex == 2 ? Colors.red : Colors.yellow,
          child: Icon(Icons.add),
          onPressed: () {
            setState(() {
              _currentIndex = 2;
            });
          },
        ),
      ),
      //   改变     按钮  位置
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,


使用图片

// items: [
        //   new BottomNavigationBarItem(
        //       label: "微信",
        //       icon: _currentIndex == 0
        //           ? ClipOval(
        //               child: Image.asset(
        //               "images/noodle.jpg",
        //               width: 32.0,
        //               height: 28.0,
        //             ))
        //           : ClipOval(
        //               child: Image.asset(
        //                 "images/sleep.webp",
        //                 width: 32.0,
        //                 height: 28.0,
        //               ),
        //             )),
        //   new BottomNavigationBarItem(
        //     label: "通迅录",
        //     icon: _currentIndex == 0
        //         ? Image.asset(
        //             "images/noodle.jpg",
        //             width: 32.0,
        //             height: 28.0,
        //           )
        //         : Image.asset(
        //             "images/sleep.webp",
        //             width: 32.0,
        //             height: 28.0,
        //           ),
        //   ),
        //   new BottomNavigationBarItem(
        //     label: "发现",
        //     icon: _currentIndex == 0
        //         ? Image.asset(
        //             "images/noodle.jpg",
        //             width: 32.0,
        //             height: 28.0,
        //           )
        //         : Image.asset(
        //             "images/sleep.webp",
        //             width: 32.0,
        //             height: 28.0,
        //           ),
        //   ),
        //   new BottomNavigationBarItem(
        //     label: "我的",
        //     icon: _currentIndex == 0
        //         ? Image.asset(
        //             "images/noodle.jpg",
        //             width: 32.0,
        //             height: 28.0,
        //           )
        //         : Image.asset(
        //             "images/sleep.webp",
        //             width: 32.0,
        //             height: 28.0,
        //           ),
        //   ),
        // ],

AppBar

简单属性

appBar: AppBar(
        //  前面的  左边
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            print("left icon ");
          },
        ),
        // 背景颜色  appbar  的 背景 颜色
        backgroundColor: Colors.red,
        //  后边的    右边
        actions: [
          IconButton(
              onPressed: () {
                print("search icon");
              },
              icon: Icon(Icons.search)),
          IconButton(
              onPressed: () {
                print("more icon");
              },
              icon: Icon(Icons.more_horiz)),
        ],


实现 小功能

定义一个 controller 
  late TabController _tabController;
初始化
  @override
  void initState(){
    super.initState();
    _tabController=TabController(length: 4, vsync: this);
  }
  下面 添加
   bottom: TabBar()
bottom: TabBar(
          //  可以  滑动
          isScrollable: true,
          controller: _tabController,
          indicatorColor: Colors.white,  // 下面的颜色
          indicatorWeight: 2,   //  下面的 形状 大小
          indicatorPadding: EdgeInsets.all(5),
          // indicatorSize: TabBarIndicatorSize.label,   // 和文字 的长度
          // 可在 里面 配置 属性
          indicator: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(10),
          ),   //  背景 颜色
          labelColor: Colors.yellow,   //  这个 改变  文字 颜色
          labelStyle: TextStyle(
            fontSize: 14
          ),
          unselectedLabelStyle: TextStyle(
            fontSize: 12
          ),
          unselectedLabelColor: Colors.white,  //  未选中  的颜色
          tabs: [
            Tab(
              child: Text("fllowing"),
            ),
            Tab(
              child: Text("hot"),
            ),
            Tab(
              child: Text("video"),
            ),
            Tab(
              child: Text("video"),
            ),
          ],
        ),
        title: Text('Flutter App'),
      ),

body

放  TabBarView  

记得 放  controller     上面 已经 配置好

放children

body: TabBarView(
        controller: _tabController,
        children: [
          //  有顺序
          ListView(
            children: [
              ListTile(
                title: Text('i am fllowing list'),
              ),
            ],
          ),
          ListView(
            children: [
              ListTile(
                title: Text('i am hot list'),
              ),
            ],
          ),
          ListView(
            children: [
              ListTile(
                title: Text('i am video list'),
              ),
            ],
          ),
          ListView(
            children: [
              ListTile(
                title: Text('i am video list'),
              ),
            ],
          ),
        ],
      ),

所有代码

import 'package:flutter/material.dart';
import './pages/tabs.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, //  将标题 上的  debug 删除
      title: 'flutter demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(),
    );
  }
}
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 4, vsync: this);
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter App'),
        //  前面的  左边
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            print("left icon ");
          },
        ),
        // 背景颜色  appbar  的 背景 颜色
        backgroundColor: Colors.red,
        //  后边的    右边
        actions: [
          IconButton(
              onPressed: () {
                print("search icon");
              },
              icon: Icon(Icons.search)),
          IconButton(
              onPressed: () {
                print("more icon");
              },
              icon: Icon(Icons.more_horiz)),
        ],
        bottom: TabBar(
          //  可以  滑动
          isScrollable: true,
          controller: _tabController,
          indicatorColor: Colors.white,
          // 下面的颜色
          indicatorWeight: 2,
          //  下面的 形状 大小
          indicatorPadding: EdgeInsets.all(5),
          // indicatorSize: TabBarIndicatorSize.label,   // 和文字 的长度
          // 可在 里面 配置 属性
          indicator: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(10),
          ),
          //  背景 颜色
          labelColor: Colors.yellow,
          //  这个 改变  文字 颜色
          labelStyle: TextStyle(fontSize: 14),
          unselectedLabelStyle: TextStyle(fontSize: 12),
          unselectedLabelColor: Colors.white,
          //  未选中  的颜色
          tabs: [
            Tab(
              child: Text("fllowing"),
            ),
            Tab(
              child: Text("hot"),
            ),
            Tab(
              child: Text("video"),
            ),
            Tab(
              child: Text("video"),
            ),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          //  有顺序
          ListView(
            children: [
              ListTile(
                title: Text('i am fllowing list'),
              ),
            ],
          ),
          ListView(
            children: [
              ListTile(
                title: Text('i am hot list'),
              ),
            ],
          ),
          ListView(
            children: [
              ListTile(
                title: Text('i am video list'),
              ),
            ],
          ),
          ListView(
            children: [
              ListTile(
                title: Text('i am video list'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}


顶部导航

修改home.dart  代码 即可

import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 5, vsync: this);
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: PreferredSize(
            preferredSize: Size.fromHeight(40),
            child: AppBar(
              //  改变 阴影
              elevation: 2,
              backgroundColor: Colors.white,
              centerTitle: true,
              //  不设置 头文字  直接 将  title 设置 为 tab
              title: SizedBox(
                //  改变 的  为 tabBar 的高度0
                height: 30,
                child: TabBar(
                  labelStyle: TextStyle(
                    fontSize: 14
                  ),
                  labelColor: Colors.red,
                  indicatorWeight: 2,
                  indicatorColor: Colors.red,
                  indicatorSize: TabBarIndicatorSize.label,
                  unselectedLabelColor: Colors.black,
                  controller: _tabController,
                  tabs: const[
                    Tab(
                      child: Text("following"),
                    ),
                    Tab(
                      child: Text("hot"),
                    ),
                    Tab(
                      child: Text("video"),
                    ),
                    Tab(
                      child: Text("basketball"),
                    ),
                    Tab(
                      child: Text("other"),
                    ),
                  ],
                ),
              ),
            )),
        body: TabBarView(
          controller: _tabController,
          children: [
            Text("fllowing"),
            Text("hot"),
            Text("video"),
            Text("basketball"),
            Text("other"),
          ],
        ));
  }
}


TabBar结合Tab


通过material 来 修改tab Bar 背景颜色

BottomAppBar buildBottomAppBar() {
    return BottomAppBar(
      child: Theme(
        data: ThemeData(
          highlightColor: Colors.blueGrey[600],
          splashColor: Colors.grey,
        ), child: Material(
        color: Colors.grey[300],
        child: TabBar(
          labelColor: Colors.blue,
          controller: _tabController,
          tabs: [
            Tab(text: "home",icon: Icon(Icons.home),),
            Tab(text: "category",icon: Icon(Icons.category),),
            Tab(text: "setting",icon: Icon(Icons.settings),),
          ],
        ),
      ),
      ),
    );
  }


侧边栏的使用

简单使用

import 'package:flutter/material.dart';
class Example01 extends StatefulWidget{
  const Example01({super.key});
  @override
  State<StatefulWidget> createState() {
  return _ExampleState();
  }
}
class _ExampleState extends State<Example01>{
  @override
  Widget build(BuildContext context) {
      // Scaffold  用来 搭建主体结构
     return Scaffold(
       drawer: buildDrawer(),
      endDrawer: buildDrawer(),
      appBar: AppBar(title: Text('title'),
      ),
       body: Center(
         // child: Text('i am the body') ,
        child: Column(
          children: [
            Builder(builder: (context){
              return ElevatedButton(onPressed: (){
                ScaffoldState state = context.findAncestorStateOfType<ScaffoldState>()!;
                state.openDrawer();
              }, child: const Text('click me '),);
            })
          ],
        ),
       ),
     );
  }
// 封装方法来构建 widget
Container buildDrawer(){
  return Container(
    color: Colors.white,
    width: 200,
  //  column  可以让子 widget  在垂直方法显示排列
    child: Column(
      children:<Widget> [
        Container(
          color:Colors.blue,height: 200,
          child: Text('this is a text1'),
        ),
        Container(
          color: Colors.red,height: 200,
          child: Text('this is text2'),
        )
      ],
    ),
  );
}
}
void main(){
  runApp(MaterialApp(
    title: 'hello',
    home: Example01(),
  ));
}


实现页面

      // endDrawer: Drawer()
      // Drawer
      drawer: Drawer(
        child: Column(
          children: [
            Row(children: [
              Expanded(
                flex: 1,    //   铺满
                child: DrawerHeader(   // 头的框架
                  decoration: BoxDecoration(
                    color: Colors.yellow,
                    image: DecorationImage (  // 修饰 图片
                      image: AssetImage("imgs/laying.jpg"),
                      fit: BoxFit.cover,
                    ),
                  ),
                  
                  child: Column(
                    children: [
                      ListTile(
                        leading: CircleAvatar(
                          backgroundImage: AssetImage("imgs/noodle.jpg"),
                        ),
                        title: Text(
                          "youren",
                          style: TextStyle(color: Color.fromRGBO(1, 1, 1, 1)),
                        ),
                      ),
                      
                      ListTile(
                        title: Text("emial:253215@qq.com"),
                      )
                    ],
                  ),
                ),
              )
            ]),
            
            ListTile(
              leading: Icon(Icons.people),
              title: Text("User"),
            ),
            Divider(),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text("Setting"),
            ),
          ],
        ),
      ),


整合

import 'package:flutter/material.dart';
import '../pages/home.dart';
import '../pages/category.dart';
import '../pages/setting.dart';
class MyTest extends StatefulWidget {
  const MyTest({Key? key}) : super(key: key);
  @override
  State<MyTest> createState() => _MyTestState();
}
class _MyTestState extends State<MyTest> with SingleTickerProviderStateMixin {
  // 当前页面 的下标
  int _currentIndex = 0;
  //  有的页面 存入 到 一个list 里面
  final List<Widget> _pages = const [
    HomePage(),
    CategoryPage(),
    SettingPage(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(70),
        child: AppBar(
          actions: [
            //  从左往右
            IconButton(
                onPressed: () {
                  print("search icon");
                },
                icon: Icon(Icons.search)),
            SizedBox(width: 100),
            IconButton(
                onPressed: () {
                  print("more icon");
                },
                icon: Icon(Icons.more_horiz)),
          ],
          title: Text("底部导航栏的测试"),
        ),
      ),
      body:        _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        // 如果 底部  按钮 四个或以上 需要使用到
        type: BottomNavigationBarType.fixed,
        iconSize: 40,
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
          BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
        ],
      ),
      drawer: Drawer(
        child: Column(
          children: [
            Row(children: [
              Expanded(
                flex: 1, //   铺满
                child: DrawerHeader(
                  // 头的框架
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      // 修饰 图片
                      image: AssetImage("imgs/laying.jpg"),
                      fit: BoxFit.cover,
                    ),
                  ),
                  child: Column(
                    children: [
                      ListTile(
                        leading: CircleAvatar(
                          backgroundImage: AssetImage("imgs/noodle.jpg"),
                        ),
                        title: Text(
                          "youren",
                          style: TextStyle(color: Color.fromRGBO(1, 1, 1, 1)),
                        ),
                      ),
                      ListTile(
                        title: Text("emial:253215@qq.com"),
                      )
                    ],
                  ),
                ),
              )
            ]),
            ListTile(
              leading: Icon(Icons.people),
              title: Text("User"),
            ),
            Divider(),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text("Setting"),
            ),
          ],
        ),
      ),
    );
  }
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      initialRoute: "/",
      routes: {
        "/": (context) => MyTest(),
        "setting": (context) => SettingPage(),
      },
    );
  }
}
void main() {
  runApp(const MyApp());
}
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  @override
  initState() {
    super.initState();
    _tabController = TabController(length: 4, vsync: this);
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(50),
          child: AppBar(
            backgroundColor: Colors.white,
            title: SizedBox(
              height: 30,
              child: TabBar(
                labelColor: Colors.red,
                indicatorSize: TabBarIndicatorSize.label,
                indicatorColor: Colors.red,
                indicatorWeight: 2,
                unselectedLabelColor: Colors.black,
                controller: _tabController,
                labelStyle: TextStyle(fontSize: 15),
                tabs: [
                  Tab(
                    child: Text("fllowing"),
                  ),
                  Tab(
                    child: Text("hot"),
                  ),
                  Tab(
                    child: Text("video"),
                  ),
                  Tab(
                    child: Text("basketball"),
                  ),
                ],
              ),
            ),
          ),
        ),
        body: TabBarView(
          controller: _tabController,
          children: [
            TextButton(
                onPressed: () {
                  Navigator.of(context).pushNamed("setting");
                },
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.white),
                  fixedSize: MaterialStateProperty.all<Size>(
                      Size(200, 50)), // 设置按钮的宽度为200，高度为50
                ),
                child: Text("click me")),
            Text("hot"),
            Text("video"),
            Text("basketball"),
          ],
        ));
  }
}



文章标签：
开发者
Dart
关键词：
Flutter页面
明弟有理想
目录
相关文章
jcLee95
|
7月前
Flutter笔记：使用Flutter构建响应式PC客户端/Web页面-案例
Flutter笔记：使用Flutter构建响应式PC客户端/Web页面-案例
jcLee95
383 0
江上清风山间明月
|
UED 索引
Flutter仿写微信导航栏快速实现页面导航
Flutter仿写微信导航栏快速实现页面导航
江上清风山间明月
250 0
江上清风山间明月
Flutter页面返回数据传递
Flutter页面返回数据传递
江上清风山间明月
127 0
岛上码农
|
存储 数据安全/隐私保护
Flutter App页面路由及路由拦截实现
直接使用页面跳转会带来诸多缺陷，通过路由管理可以降低页面耦合，提高代码的可维护性和权限控制。本篇介绍了 Flutter 的路由管理和拦截实现。
岛上码农
1383 1
Flutter App页面路由及路由拦截实现
程序猿在广东
如何用一行代码实现Flutter页面变灰效果？
如何用一行代码实现Flutter页面变灰效果？
程序猿在广东
170 0
如何用一行代码实现Flutter页面变灰效果？
岛上码农
|
JSON 数据格式 容器
Flutter 仿微信价值几个亿的页面
网传微信支付页面的第三方链接一个格子需要广告费1一个亿，微信支付页非常适合做功能导航，本篇使用 ListView和 GridView 模仿微信支付页面
岛上码农
268 0
Flutter 仿微信价值几个亿的页面
岛上码农
|
存储 索引 容器
Flutter 构建常用的 App 页面框架
详细讲解如何用 Flutter 构建一个底部导航的 App 页面框架
岛上码农
509 0
Flutter 构建常用的 App 页面框架
yechaoa
|
Java Android开发 iOS开发
Flutter 跳转页面并传值
Flutter 跳转页面并传值
yechaoa
378 0
Flutter 跳转页面并传值
韩曙亮
|
索引
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )（一）
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )（一）
韩曙亮
359 0
韩曙亮
|
Android开发
【Flutter】Flutter 混合开发 ( 关联 Android 工程与 Flutter 工程 | 安卓页面中嵌入 Flutter 页面 | 安卓中启动 Flutter 页面 )（三）
【Flutter】Flutter 混合开发 ( 关联 Android 工程与 Flutter 工程 | 安卓页面中嵌入 Flutter 页面 | 安卓中启动 Flutter 页面 )（三）
韩曙亮
293 0
【Flutter】Flutter 混合开发 ( 关联 Android 工程与 Flutter 工程 | 安卓页面中嵌入 Flutter 页面 | 安卓中启动 Flutter 页面 )（三）

热门文章

最新文章

  • 1
    Flutter 61: 图解基本 Button 按钮小结 (一)
  • 2
    打通前后端逻辑，客户端Flutter代码一天上线
  • 3
    Flutter新锐专家之路：混合开发篇
  • 4
    Flutter Plugin调用Native APIs
  • 5
    GMTC-闲鱼Flutter实践效果访谈
  • 6
    从零开始，一起学习开发个 Flutter App 吧
  • 7
    如何在 Flutter 中使用 MemoryImage【Flutter 专题 23】
  • 8
    Flutter的AnimatedDefaultTextStyle实现文本样式的动画过渡切换效果
  • 9
    【Flutter】Dart 面向对象 ( get 方法 | set 方法 | 静态方法
  • 10
    flutter外接纹理实现方案
  • 1
    flutter 引用图片资源遇到的问题
    91
  • 2
    移动应用开发的未来：Flutter与Android的深度融合
    81
  • 3
    Flutter 弃用 WillPopScope 使用 PopScope 替代方法
    297
  • 4
    【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践
    83
  • 5
    【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
    290
  • 6
    【Flutter前端技术开发专栏】Flutter中的列表滚动性能优化
    223
  • 7
    【Flutter前端技术开发专栏】Flutter中的图片加载与缓存优化
    649
  • 8
    【Flutter前端技术开发专栏】Flutter中的线程与并发编程实践
    236
  • 9
    【Flutter前端技术开发专栏】Flutter中的性能分析工具Profiler
    349
  • 10
    【Flutter 前端技术开发专栏】Flutter 中的调试技巧与工具使用
    105

    • 相关课程

    更多
  • React 入门教程开发文档

    • 相关电子书

    更多
  • 基于flutter的产品应用实践
  • 《Flutter in action》
  • 闲鱼《Flutter 技术解析与实战》
    • 下一篇
    阿里云oss存储简介和如何使用