第03節: 不規則底部工具欄制作-1

博客地址：

https://jspang.com/post/flutterDemo.html#toc-973

視頻地址：

https://www.bilibili.com/video/av39709290?p=3

?

視頻里面的評論：動態組件就是可以setState的組件

?

?

?

flutter create demo02的項目

?

這里是定義主題的地方：自定義主題使用theme然后里面使用：primarySwatch，后面主要跟的就是我們的顏色

?

引入：bottom_appBar_demo.dart

然后我們去創建這個自定義的組件bottom_appBar_demo.dart

創建我們的動態組件：stateFulW快捷鍵

?

文件起好名字:BottomAppBarDemo

今天主要學的就是這個：floatingActionButton，字面意思 可交互的浮動的按鈕。在Scaffold里面已經有它的位置了。所以后面我們直接吧FloatingActionButton組件引用過來就可以了。

ToolTip不影響整個頁面的布局，只有長按的時候才會顯示。為什么要加tooltip。因為我們這個FAB組件經常里面就放一個icon圖標。

child里面一般都是放ICON組件。這樣這個動態組件我們就寫完了。

?

查看效果

鼠標長按會出tooltip

?

再加上app底部的工具欄

這次這里我們使用BottomAppBar(）底部工具欄。這個底部工具欄有什么好處呢。它比NavigatorBar要靈活。

?

?

shape的作用因為要和FAB融合 融合的時候要有一個缺口。缺口的設置就在shape里面設置。

?

查看效果

?

但是現在還沒有融合到一起：這里我們需要設置這個屬性：floatingActionButtonLocation

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

?

最終效果

?

代碼

import 'package:flutter/material.dart'; import 'bottom_appBar_demo.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {// This widget is the root of your application. @overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.lightBlue,//里面定義了很多的主題,這里使用亮藍色 ),home:BottomAppBarDemo());} } main.dart

?

?

import 'package:flutter/material.dart';class BottomAppBarDemo extends StatefulWidget {final Widget child;BottomAppBarDemo({Key key, this.child}) : super(key: key);_BottomAppBarDemoState createState() => _BottomAppBarDemoState(); }class _BottomAppBarDemoState extends State<BottomAppBarDemo> {@overrideWidget build(BuildContext context) {return Scaffold(floatingActionButton: FloatingActionButton(onPressed: (){},tooltip: 'WJW',child: Icon(Icons.add,color: Colors.white,),),floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,bottomNavigationBar: BottomAppBar(color: Colors.lightBlue,shape: CircularNotchedRectangle(),child: Row(mainAxisSize: MainAxisSize.max,mainAxisAlignment: MainAxisAlignment.spaceAround,children: <Widget>[IconButton(icon: Icon(Icons.home),color: Colors.white,onPressed: (){},),IconButton(icon: Icon(Icons.alarm_on),color: Colors.white,onPressed: (){},)],),),);} } bottom_appBar_demo.dart

?

轉載于:https://www.cnblogs.com/wangjunwei/p/10581694.html

總結

以上是生活随笔為你收集整理的20个Flutter实例视频教程-第03节: 不规则底部工具栏制作-1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。