ButtomNavigationWeiget

最新推荐文章于 2023-09-23 13:45:40 发布

原创最新推荐文章于 2023-09-23 13:45:40 发布 · 209 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#BottonNavigationWeiget

flutter 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何在Flutter中实现底部导航栏，并对比了StatelessWidget与StatefulWidget的区别，前者适用于不需要内部状态更新的组件，后者则适用于动态内容展示，可根据用户输入或状态变化进行更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ButtomNavigationWeigetState:底部导航栏制作

StateLessWeiget 和 StateFulWeiget的区别

Stateless widgets

当你创建的widge不需要管理任何形式的内部state时，你就应当使用StatelessWidgets。这类widget不需要任何可变的state，然后会在初始化数据后被使用。、、

Stateful widgets

stateful widgets是动态的。他们允许我们创建一个能动随时间动态改变器内容的widget，并且不依赖于其初始化时被传入的静态状态。他们可以随着用户的输入，各种形式的异步回包或其他形式的状态变化而改变。

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: ButtomNavigationWeiget() ,
    );
  }
}

import 'package:flutter/material.dart';
import 'center_screen.dart';
import 'home_screen.dart';
import 'email_screen.dart';

class ButtomNavigationWeiget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => ButtomNavigationWeigetState();
}

class ButtomNavigationWeigetState extends State<ButtomNavigationWeiget> {
  int _cunrentindex = 0;
  final _bottonNavigationBarColor = Colors.blue;
  List<Widget> list = List<Widget>();
  @override
  void initState() {
    list..add(HomeScreen())..add(EmailScreen())..add(CenterScreen());
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: list[_cunrentindex],
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
              color: Colors.black38,
            ),
// color即设置图片的颜色，有设置字体的颜色。
            activeIcon: Icon(
              Icons.home,
              color: _bottonNavigationBarColor,
            ),
            title: Text(
              'home',
            ),
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.email, color: Colors.black38),
              activeIcon: Icon(
                Icons.email,
                color: _bottonNavigationBarColor,
              ),
              title: Text(
                'email',
              )
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle, color: Colors.black38),
            activeIcon: Icon(
              Icons.account_circle,
              color: _bottonNavigationBarColor,
            ),
            title: Text(
              'mycenter',
            ),
          ),
        ],
        currentIndex: _cunrentindex,
        onTap: (int index) {
          setState(() {
            _cunrentindex = index;
            print(list.length);
          });
        },
//        type: BottomNavigationBarType.shifting,//设置点击的焦点。按钮变大。但是默认的颜色是透明色，必须要设置颜色。
        type: BottomNavigationBarType.fixed, //不需要去设置颜色。
      ),
    );
  }
}

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('home'),
      ),
    );
  }
  
}