（五）Flutter 界面结构 tab appbar bottomNavigationBar drawer

最新推荐文章于 2024-05-18 00:05:22 发布
最新推荐文章于 2024-05-18 00:05:22 发布
阅读量615 收藏
点赞数 1
分类专栏： 042Flutter
独学而无友，则孤陋寡闻。q群582951247
本文链接：https://blog.csdn.net/mp624183768/article/details/84973628
版权

 

上节课程的内容 都写在了一起 为了解耦 我们可以把他们单独提取出来一个类

lib 下新建demo/listview_demo.dart文件

内容如下

import 'package:flutter/material.dart';
import 'package:nihao_flutter/model/post.dart';

class ListViewDemo extends StatelessWidget{
  Widget _listItemBuilder(BuildContext context,int index){
    return Container(
      color: Colors.white,
      margin: EdgeInsets.all(8.0),
      child: Column(
        children: <Widget>[
          Image.network(posts[index].imgeUrl),
          SizedBox(height: 16.0), 
          Text(
            posts[index].title,
            style: Theme.of(context).textTheme.title,
          ),
          Text(
            posts[index].author,
            style: Theme.of(context).textTheme.subhead,
          ),
           SizedBox(height: 16.0), 
        ],
      ),
    );
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
          itemCount:posts.length,
          itemBuilder: _listItemBuilder,
        );
  }

}

lib 下新建demo/hello_demo.dart文件

虽然这个文件没啥用 但是一家人就得整整齐齐的

import 'package:flutter/material.dart';

class Hello extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
    child: Text(
     'Hello1111',
     textDirection: TextDirection.ltr,
     style: TextStyle(
       fontSize: 40.0,
       fontWeight: FontWeight.bold,
       color: Colors.black87
     ),
      ),
  
  );
  }

}

 

test/widget_test.dart老报错  说没有MyApp 

真是怕了你了 把main.dart中的app 改成MyApp 然后顺便简化主页的代码

import 'package:flutter/material.dart';
import 'model/post.dart';
import 'demo/hello_demo.dart';
import 'demo/listview_demo.dart';

void main() => runApp(MyApp ());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Home(),
      theme: ThemeData(primarySwatch: Colors.yellow),
    );
  }
}

class Home extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      backgroundColor: Colors.grey[100],
      appBar: AppBar(
        title: Text('app Bar'),
        // 阴影
        elevation: 0.0,
      ),
      body: ListViewDemo(),
    );
  }
}

还需要重启下studio这个bug才会消失不见

每次app运行上面都有一个debug 可以去掉的

      debugShowCheckedModeBanner: false,
import 'package:flutter/material.dart';
import 'model/post.dart';
import 'demo/hello_demo.dart';
import 'demo/listview_demo.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(primarySwatch: Colors.yellow),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      backgroundColor: Colors.grey[100],
      appBar: AppBar(
        title: Text('app Bar'),
        // 阴影
        elevation: 0.0,
      ),
      body: ListViewDemo(),
    );
  }
}

内容和上节一样 但是更方便以后的修改和开发了

so

继续本节课内容

AppBar:工具栏上的图标按钮（IconButton）整体代码如下

import 'package:flutter/material.dart';
import 'model/post.dart';
import 'demo/hello_demo.dart';
import 'demo/listview_demo.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(primarySwatch: Colors.yellow),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      backgroundColor: Colors.grey[100],
      appBar: AppBar(
        title: Text('app Bar'),
        // 阴影
        elevation: 0.0,
        leading: IconButton(
          icon: Icon(Icons.menu),
          tooltip: "Navigration",
          onPressed: () => {debugPrint("Navigration Button is pressed.")},
        ),
        actions: <Widget>[
          IconButton(
              icon: Icon(Icons.search),
              onPressed: () => {debugPrint("search Button is pressed.")})
        ],
      ),
      body: ListViewDemo(),
    );
  }
}

 

控制台打印

()=>debugPrint('search Button is pressed.')

android 叫做TabLayout Flutter 叫做TabBar :用标签形式展示内容

具体代码如下

import 'package:flutter/material.dart';
import 'model/post.dart';
import 'demo/hello_demo.dart';
import 'demo/listview_demo.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(primarySwatch: Colors.yellow),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
        length: 3,
        child: Scaffold(
          backgroundColor: Colors.grey[100],
          appBar: AppBar(
            title: Text('app Bar'),
            // 阴影
            elevation: 0.0,
            leading: IconButton(
              icon: Icon(Icons.menu),
              tooltip: "Navigration",
              onPressed: () => {debugPrint("Navigration Button is pressed.")},
            ),
            actions: <Widget>[
              IconButton(
                  icon: Icon(Icons.search),
                  onPressed: () => {debugPrint("search Button is pressed.")})
            ],
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.local_florist)),
                Tab(icon: Icon(Icons.change_history)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
          ),
          body: TabBarView(
            children: [ListViewDemo(), Hello(), Icon(Icons.directions_bike)],
          ),
        ));
  }
}

在设置下点击状态

 bottom: TabBar(
            unselectedLabelColor: Colors.black38,
            indicatorColor: Colors.black54,
            indicatorSize: TabBarIndicatorSize.label,
            indicatorWeight:1.0 ,
            tabs: <Widget>[
              Tab(icon: Icon(Icons.local_florist)),
              Tab(icon: Icon(Icons.change_history)),
              Tab(icon: Icon(Icons.directions_bike)),
            ],

对tab增加水波纹效果

class MyApp extends StatelessWidget{ 
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
        highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
        splashColor: Colors.white70
      ),
    );
  }
  
}

现在具体源码如下

import 'package:flutter/material.dart';
import 'model/post.dart';
import 'demo/hello_demo.dart';
import 'demo/listview_demo.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(
          primarySwatch: Colors.yellow,
          highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
          splashColor: Colors.white70),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
        length: 3,
        child: Scaffold(
          backgroundColor: Colors.grey[100],
          appBar: AppBar(
            title: Text('app Bar'),
            // 阴影
            elevation: 0.0,
            leading: IconButton(
              icon: Icon(Icons.menu),
              tooltip: "Navigration",
              onPressed: () => {debugPrint("Navigration Button is pressed.")},
            ),
            actions: <Widget>[
              IconButton(
                  icon: Icon(Icons.search),
                  onPressed: () => {debugPrint("search Button is pressed.")})
            ],
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.local_florist)),
                Tab(icon: Icon(Icons.change_history)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
              unselectedLabelColor: Colors.black38,
              indicatorColor: Colors.black45,
              indicatorSize: TabBarIndicatorSize.label,
              indicatorWeight: 1.0,
            ),
          ),
          body: TabBarView(
            children: [ListViewDemo(), Hello(), Icon(Icons.directions_bike)],
          ),
        ));
  }
}

Flutter Drawer 抽屉（侧边栏）

先写一个简单的drawer 不写动作 直接从左往右即可滑动出现

drawer: Container(
            color: Colors.white,
            padding: EdgeInsets.all(8.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [Text("This is Drawer")],
            ),
          ),
        )

 

 

import 'package:flutter/material.dart';
import 'package:nihao_flutter/demo/listview_demo.dart';



void main()=>runApp(MyApp()); 



class MyApp extends StatelessWidget{ 
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
        highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
        splashColor: Colors.white70
      ),
    );
  }
  
}


  
class Home extends StatelessWidget{
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
      length: 3,
      child: Scaffold(
      backgroundColor: Colors.grey[100],
        appBar: AppBar(
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Navigration',
            onPressed: ()=>debugPrint('Navigration Button is pressed.'),
          ),
          title: Text('app Bar'),
          actions: <Widget>[
            IconButton(
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: ()=>debugPrint('search Button is pressed.'),
          ),
          ],
          // 阴影
          elevation: 0.0,
          bottom: TabBar(
            unselectedLabelColor: Colors.black38,
            indicatorColor: Colors.black54,
            indicatorSize: TabBarIndicatorSize.label,
            indicatorWeight:1.0 ,
            tabs: <Widget>[
              Tab(icon: Icon(Icons.local_florist)),
              Tab(icon: Icon(Icons.change_history)),
              Tab(icon: Icon(Icons.directions_bike)),
            ],
          ),
        ),
        body: TabBarView(children: <Widget>[
          Icon(Icons.local_florist,size: 128.0,color: Colors.black12),
          Icon(Icons.change_history,size: 128.0,color: Colors.black12),
          Icon(Icons.directions_bike,size: 128.0,color: Colors.black12),
        ],),
      drawer: Container(
        color: Colors.white,
        padding: EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('This is Drawer')
          ],
        ),
      ),
      ),
    );
  }

}

稍微规范一点

            drawer: Drawer(

              child: ListView(padding: EdgeInsets.zero, children: [
                DrawerHeader(
                    child: Text('header'.toUpperCase()),
                    decoration: BoxDecoration(color: Colors.grey[100])),
                ListTile(
                  title: Text(
                    'Favorite',
                    textAlign: TextAlign.right,
                  ),
                  trailing: Icon(Icons.favorite,color: Colors.black12,size: 22.0),
                ),
                ListTile(
                  title: Text(
                    'Messages',
                    textAlign: TextAlign.right,
                  ),
                  trailing: Icon(Icons.message,color: Colors.black12,size: 22.0),
                ),
                ListTile(
                  title: Text(
                    'Settings',
                    textAlign: TextAlign.right,
                  ),
                  trailing: Icon(Icons.settings,color: Colors.black12,size: 22.0),
                ),

              ]),
            )));

从左到右边就是

drwer:widget

从右边到左边就是

endDrawer:widget

我们改成从右边弹出来

            endDrawer: Drawer(

              child: ListView(padding: EdgeInsets.zero, children: [
                DrawerHeader(
                    child: Text('header'.toUpperCase()),
                    decoration: BoxDecoration(color: Colors.grey[100])),
                ListTile(
                  title: Text(
                    'Favorite',
                    textAlign: TextAlign.right,
                  ),
                  trailing: Icon(Icons.favorite,color: Colors.black12,size: 22.0),
                ),
                ListTile(
                  title: Text(
                    'Messages',
                    textAlign: TextAlign.right,
                  ),
                  trailing: Icon(Icons.message,color: Colors.black12,size: 22.0),
                ),
                ListTile(
                  title: Text(
                    'Settings',
                    textAlign: TextAlign.right,
                  ),
                  trailing: Icon(Icons.settings,color: Colors.black12,size: 22.0),
                ),

              ]),
            )));
  }

提取出来Drawer小控件 到lib/demo/drawer_demo.dart

美化一下 然后

import 'package:flutter/material.dart';

class DrawerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(padding: EdgeInsets.zero, children: [
        UserAccountsDrawerHeader(
            accountName: Text(
              "Liu An",
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            accountEmail: Text("1377093782@qq.com"),
            currentAccountPicture: CircleAvatar(
              backgroundImage: NetworkImage(
                  "https://qlogo3.store.qq.com/qzone/1377093782/1377093782/100?1517837561"),
            ),
            decoration: BoxDecoration(
                color: Colors.yellow[400],
                image: DecorationImage(
                    image: NetworkImage(
                        "https://b17.photo.store.qq.com/psb?/V12afHjz3YxmJJ/wsSH2RiAY5hw.wpvEsjHmXdBttWDcJGcbjdvPUNrPZc!/b/dBEAAAAAAAAA&bo=QAZZCEAGWQgRIBc!&rf=viewer_311"),
                    fit: BoxFit.cover,
                    colorFilter: ColorFilter.mode(
                        Colors.yellow[400], BlendMode.hardLight)))),
        ListTile(
          title: Text(
            'Favorite',
            textAlign: TextAlign.right,
          ),
          trailing: Icon(Icons.favorite, color: Colors.black12, size: 22.0),
        ),
        ListTile(
          title: Text(
            'Messages',
            textAlign: TextAlign.right,
          ),
          trailing: Icon(Icons.message, color: Colors.black12, size: 22.0),
        ),
        ListTile(
          title: Text(
            'Settings',
            textAlign: TextAlign.right,
          ),
          trailing: Icon(Icons.settings, color: Colors.black12, size: 22.0),
        ),
      ]),
    );
  }
}

看到吗 图片上面的帅逼就是我。。

 

主页代码如下

import 'package:flutter/material.dart';
import 'model/post.dart';
import 'demo/hello_demo.dart';
import 'demo/listview_demo.dart';
import 'demo/drawer_demo.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(
          primarySwatch: Colors.yellow,
          highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
          splashColor: Colors.white70),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
        length: 3,
        child: Scaffold(
            backgroundColor: Colors.grey[100],
            appBar: AppBar(
              title: Text('app Bar'),
              // 阴影
              elevation: 0.0,
              leading: IconButton(
                icon: Icon(Icons.menu),
                tooltip: "Navigration",
                onPressed: () => {debugPrint("Navigration Button is pressed.")},
              ),
              actions: <Widget>[
                IconButton(
                    icon: Icon(Icons.search),
                    onPressed: () => {debugPrint("search Button is pressed.")})
              ],
              bottom: TabBar(
                tabs: [
                  Tab(icon: Icon(Icons.local_florist)),
                  Tab(icon: Icon(Icons.change_history)),
                  Tab(icon: Icon(Icons.directions_bike)),
                ],
                unselectedLabelColor: Colors.black38,
                indicatorColor: Colors.black45,
                indicatorSize: TabBarIndicatorSize.label,
                indicatorWeight: 1.0,
              ),
            ),
            body: TabBarView(
              children: [ListViewDemo(), Hello(), Icon(Icons.directions_bike)],
            ),
            drawer: DrawerDemo()));
  }
}

底部导航

demo 下新建bottom_navigation_bar_demo.dart

import 'package:flutter/material.dart';
class BottomNavigationBarDemo extends StatefulWidget{
  @override
    State<StatefulWidget> createState() {
      // TODO: implement createState
      return _BottomNavigationBarDemoState();
                }
            
          
      }
      
      class _BottomNavigationBarDemoState extends State<BottomNavigationBarDemo>{
          int _currentIndex=0;
  void _onTapHandler(int index){
    setState((){
      _currentIndex=index;
    });
  }
        @override
          Widget build(BuildContext context) {
            // TODO: implement build
            return BottomNavigationBar(
            currentIndex:_currentIndex,
            onTap: _onTapHandler,
            type: BottomNavigationBarType.fixed,
            fixedColor: Colors.black,
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.explore),
                title: Text('Explore')
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.history),
                title: Text('History')
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.list),
                title: Text('List')
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.person),
                title: Text('My')
              ),
            ],
          );
          }

}

main.dart

import 'package:flutter/material.dart';
import 'package:nihao_flutter/demo/bottom_navigation_bar_demo.dart';
import 'package:nihao_flutter/demo/drawer_demo.dart';
import 'package:nihao_flutter/demo/listview_demo.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(
          primarySwatch: Colors.yellow,
          highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
          splashColor: Colors.white70),
    );
  }
}

class Home extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
      length: 3,
      child: Scaffold(
          backgroundColor: Colors.grey[100],
          appBar: AppBar(
            leading: IconButton(
              icon: Icon(Icons.menu),
              tooltip: 'Navigration',
              onPressed: () => debugPrint('Navigration Button is pressed.'),
            ),
            title: Text('app Bar'),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.search),
                tooltip: 'Search',
                onPressed: () => debugPrint('search Button is pressed.'),
              ),
            ],
            // 阴影
            elevation: 0.0,
            bottom: TabBar(
              unselectedLabelColor: Colors.black38,
              indicatorColor: Colors.black54,
              indicatorSize: TabBarIndicatorSize.label,
              indicatorWeight: 1.0,
              tabs: <Widget>[
                Tab(icon: Icon(Icons.local_florist)),
                Tab(icon: Icon(Icons.change_history)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
          ),
          body: TabBarView(
            children: <Widget>[
              ListViewDemo(),
              Icon(Icons.change_history, size: 128.0, color: Colors.black12),
              Icon(Icons.directions_bike, size: 128.0, color: Colors.black12),
            ],
          ),
          drawer: DrawerDemo(),
          bottomNavigationBar: BottomNavigationBarDemo(),
          
          ),
    );
  }
}

Flutter 底部导航栏

BottomNavigationBar也完成了

这个只是展示而已并没有实际的运用到项目中

如何实际的应用可以参照官方文档

官方BottomNavigationBar教程

安果移不动
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Flutter沉浸式透明状态栏|flutter自定义凸起BottomAppBar导航
05-11 1180
前言 如下图：状态栏是指android手机顶部显示手机状态信息的位置。 android 自4.4开始新加入透明状态栏功能，状态栏可以自定义颜色背景，使titleBar能够和状态栏融为一体，增加沉浸感。 如上图：Flutter状态栏默认为黑色半透明，那么如何去掉这个状态栏的黑色半透明背景色，让其和标题栏颜色一致，通栏沉浸式，实现如下图效果呢？ 首先需要在flutter项目目录下找到android主入口页面MainActivity.kt或MainActivity.java，判断一下版本号然后将状态栏颜
flutter appbar bottom 底部view
仰望星空
12-25 3979
appBar: AppBar( title: const Text('AppBar Bottom Widget'), leading: IconButton( tooltip: 'Previous choice', icon: const Icon(Icons.arrow_back), ...
flutter 三：界面结构
煮酒Shae
03-24 1229
文章目录1.Material 应用 1.Material 应用 如果不想flutter debug的时候模拟器右上角显示DEBUG，就添加： debugShowCheckedModeBanner: false, 另外建dart文件，给main.dart减负。 因为post.dart在相对于listview_demo.dart的上一级目录往下找，所以加一个…/ import '../model/...
Flutter 中的 BottomAppBar 小部件：全面指南
最新发布
smileKH的博客
05-18 456
是一个位于屏幕底部的水平应用栏，它为用户提供了快速访问应用主要功能的方式。可以包含导航图标、标题以及与之配合的浮动操作按钮（shape: CircularNotchedRectangle(), // 设置底部导航栏的形状color: Theme.of(context).primaryColor, // 使用主题颜色],),
Flutter BottomAppBar
Millet
11-17 978
Flutter BottomAppBar BottomAppBar // 底部应用栏目 class BottomAppBarDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( // FAB按钮，位置是位于上面的 floatingActionButtonLocation: FloatingActionButtonLocation.
flutter学习九 页面基本结构
weixin_45561719的博客
08-08 702
页面基本结构 //1，引入material包 import 'package:flutter/material.dart'; //2，运行包 void main() => runApp(MyApp()); //3，继承statelessWidegt基本组件 class MyApp extends StatelessWidget { @override Widget build(BuildContext context){ //4，返回container布局组件 return Container
Flutter AppBar 工具栏、导航栏
10-06
在Flutter框架中，AppBar是一个非常重要的组件，它用于构建应用程序顶部的导航栏，通常显示应用的标题、返回按钮以及其他的操作选项。这篇文章将深入探讨如何使用AppBar，包括其基本用法、与TabBar的结合、如何移除...
Flutter 自定义Drawer 滑出位置的大小实例代码详解
08-19
Flutter 自定义Drawer 滑出位置的大小实例代码详解 Flutter 中的 Drawer 控件是一个非常常用的控件，它可以侧边栏滑出导航菜单，类似于 iOS 开发或者 Android 开发中的“抽屉”效果。_drawer 控件的使用频率也是...
Flutter中的呼吸Appbar和小部件库
08-10
本文将深入探讨"Flutter中的呼吸Appbar和小部件库"这一主题，帮助你理解如何利用Flutter的特性创建动态、引人入胜的用户界面。 首先，让我们了解"呼吸Appbar"。在iOS和Android设计中，Appbar通常指的是屏幕顶部的...
如何给Flutter界面切换实现点特效
08-25
"如何给Flutter界面切换实现点特效" 本篇文章主要讲述了如何给Flutter界面切换实现点特效的相关资料。通过示例代码介绍了非常详细，对大家学习或者使用Flutter具有一定的参考学习价值。 首先，背景知识是页面之间...
Flutter之抽屉组件Drawer
01-07
Scalfold 是 Flutter MaterialApp 常用的布局 Widget，接受一个 drawer属性，支持配置 Drawer，可以实现从侧边栏拉出导航面板，好处是把一些功能菜单折叠起来，通常Drawer是和Listview组件或者 Column组合使用进行...
Flutter Appbar
pumelll的博客
03-21 811
AppBar是一个顶端栏，对应着 Android 的 Toolbar。 AppBar 有以下常用属性： leading → Widget - 在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮。 title → Widget - Toolbar 中主要内容，通常显示为当前界面的标题文字。 actions → List - 一个 Widget 列表，...
Flutter BottomAppBar插入FAB
weixin_34097242的博客
05-10 280
import 'package:flutter/material.dart'; void main() => runApp(new BottomAppBarDemo()); class BottomAppBarDemo extends StatelessWidget { @override Widget build(BuildContext context) { retu...
一款Flutter伪自定义BottomAppBar
吉原拉面
07-25 891
https://github.com/yumi0629/FlutterUI/tree/master/lib/bottomappbar   使用Flutter原生的FloatingActionButton+BottomAppBar实现，配合Scaffold使用更舒服，适合不喜欢自己用Widget组合自定义BottomAppBar的小伙伴。   实现思路为：1、自定义floatingActio...
flutter tab选项卡appbar下的选项卡
代码小疯子
07-07 4299
flutter tab选项卡 appbar 下的选项卡 TabBar 、Tab、TabBarView 结合实现 这里实现的是appbar 下的选项卡
Flutter进阶实战 3-20 不规则底部工具栏BottomAppBar 制作（1）
dpl12的博客
07-04 1509
前言：大部分的底部导航都是中规中矩的，但有些时候也需要突出个性，比如在中间部位增加一个突出的按钮。 实现界面效果： 实现过程： 1、自定义主题样本 Flutter支持自定义主题，如果使用自定义主题，设置的内容项是非常多的，这可能让初学者头疼，Flutter贴心的为给我们准备了主题样本。 primarySwatch ：现在支持18种主题样本了。 具体代码如下： theme: ...
【Flutter】【widget】BottomNavigationBar和BottomAppBar
自动人生博客
11-07 1248
BottomNavigationBar 底部导航栏欢迎关注，留言，咨询，交流！
Flutter进阶实战 4-20 不规则底部工具栏BottomAppBar 制作（2）
dpl12的博客
07-07 761
前言：前面博客做了一个不规则底部工具栏BottomAppBar的界面，这里继续进行完善，实现按钮的点击事件。 实现效果： 实现过程： 1、StatefulWidget子页面的制作 前面使用的子页面继承与StatelessWidget(不可变控件)，所以很麻烦的写了4个页面，其实完全可以写一个继承于StatefulWidget的控件，进行动态创建。 新建一个each_view.dart...
Flutter用NestedScrollView 嵌套appbar如何解决头部不滑动问题
06-08
在Flutter中使用NestedScrollView嵌套AppBar时，可能会遇到头部不滑动的问题，这是由于AppBar在NestedScrollView的SliverAppBar中默认是固定在顶部的，无法随着用户向下滑动而实现滑动效果。 为了解决这个问题，你...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

安果移不动

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值