最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)使用Flutter怎么實(shí)現(xiàn)底部導(dǎo)航欄，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)長(zhǎng)期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為陽(yáng)東企業(yè)提供專業(yè)的成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)，陽(yáng)東網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

程序主結(jié)構(gòu)如下：

1.在程序主入口文件main.dart添加如下代碼

import 'package:flutter/material.dart';
import 'bottom_navigation.dart';

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

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   title: 'Flutter Demo',
   theme: ThemeData.light(),
   home: BottomNavigationWidget(),
  );
 }
}

2.創(chuàng)建4個(gè)界面，home_page.dart、constant_page.dart、find_page.dart、my_page.dart

home_page.dart

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(title: Text('HomePage'),),
   body: Center(
    child: Text('這是首頁(yè)'),
   ),
  );
 }
}

constant_page.dart

import 'package:flutter/material.dart';

class ConstantPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(title: Text('ConstantPage'),),
   body: Center(
    child: Text('這是聯(lián)系人'),
   ),
  );
 }
}

find_page.dart

import 'package:flutter/material.dart';

class FindPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(title: Text('FindPage'),),
   body: Center(
    child: Text('這是發(fā)現(xiàn)'),
   ),
  );
 }
}

my_page.dart

import 'package:flutter/material.dart';

class MyPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(title: Text('MyPage'),),
   body: Center(
    child: Text('這是我的'),
   ),
  );
 }
}

3.創(chuàng)建動(dòng)態(tài)組件BottomNavigationWidget，新建bottom_navigation.dart

import 'package:flutter/material.dart';
import 'pages/home_page.dart';
import 'pages/constant_page.dart';
import 'pages/find_page.dart';
import 'pages/my_page.dart';

class BottomNavigationWidget extends StatefulWidget {

 @override
 _BottomNavigationWidgetState createState() => new _BottomNavigationWidgetState();
}

class _BottomNavigationWidgetState extends State {
 final List list = List();
 int _currentIndex = 0;
 @override
 void initState() {
  list
   ..add(HomePage())
   ..add(ConstantPage())
   ..add(FindPage())
   ..add(MyPage());
  super.initState();
 }

 @override
 Widget build(BuildContext context) {
  return Scaffold(
   body: list[_currentIndex],
   bottomNavigationBar: BottomNavigationBar(
    currentIndex: _currentIndex,
     onTap: (int index){
      setState(() {
       _currentIndex = index;
      });
     },
     type: BottomNavigationBarType.fixed,
     items: [
      BottomNavigationBarItem(
       icon: Icon(Icons.home,color: Colors.blue,),
       title: Text('首頁(yè)',style: TextStyle(color: Colors.blue))
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.contacts,color: Colors.blue,),
        title: Text('聯(lián)系',style: TextStyle(color: Colors.blue))
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.find_in_page,color: Colors.blue,),
        title: Text('發(fā)現(xiàn)',style: TextStyle(color: Colors.blue))
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.menu,color: Colors.blue,),
        title: Text('我的',style: TextStyle(color: Colors.blue))
      ),

     ]
   ),
  );
 }
}

上述就是小編為大家分享的使用Flutter怎么實(shí)現(xiàn)底部導(dǎo)航欄了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前名稱：使用Flutter怎么實(shí)現(xiàn)底部導(dǎo)航欄-創(chuàng)新互聯(lián)
文章位置：http://fisionsoft.com.cn/article/dcopdd.html