掌握Flutter底部导航栏：畅游导航之旅

news2024/9/22 21:15:29

1. 引言

在移动应用开发中，底部导航栏是一种常见且非常实用的用户界面元素。它提供了快速导航至不同功能模块或页面的便捷方式，使用户可以轻松访问应用程序的各个部分。在Flutter中，底部导航栏也是一项强大的功能，开发者可以利用Flutter框架提供的丰富组件和灵活性，轻松实现各种样式和交互效果的底部导航栏。

本文将深入探讨Flutter中底部导航栏的实现方法，从基础的结构搭建到高级功能的应用，带领读者逐步掌握使用Flutter构建底部导航栏的技巧与窍门。我们将介绍如何创建基本的底部导航栏结构，自定义其外观，实现与页面的切换和状态管理，并探索一些高级功能，如徽章、动画效果等。

通过本文的学习，读者将能够熟练运用Flutter框架，设计出符合应用主题和用户体验要求的精美底部导航栏，为移动应用的开发与优化提供强有力的支持。

在这里插入图片描述

2. Flutter底部导航栏概述

在Flutter中，底部导航栏是一种常见的用户界面组件，通常用于展示应用程序的主要功能模块或不同页面的快速导航入口。底部导航栏通常位于屏幕底部，由一组导航项（通常是图标和标签组合）组成，用户可以通过点击不同的导航项来切换应用程序的不同部分。

底部导航栏在移动应用开发中扮演着至关重要的角色，它不仅提供了直观的导航方式，还能够增强用户体验和提升应用的易用性。在Flutter中，开发者可以使用内置的BottomNavigationBar组件轻松创建和定制底部导航栏，同时结合其他Flutter组件和功能实现更丰富的导航体验。

底部导航栏的核心概念包括导航项（Navigation Items）和当前选中项（Selected Item）。导航项是指底部导航栏中的每个单独项目，通常由图标和标签组成，用于表示应用程序的不同功能或页面。而当前选中项则是指用户当前正在查看或操作的导航项，通常以不同的样式或颜色进行突出显示，以便用户清晰地了解自己所处的位置。

在接下来的章节中，我们将深入探讨如何在Flutter中创建和定制底部导航栏，包括基本结构的构建、外观的定制、与页面的切换以及状态管理等方面的内容，帮助读者全面掌握底部导航栏的实现技巧与方法。

3. 创建底部导航栏的基本结构

底部导航栏在Flutter中的创建可以通过两个主要的组件来实现：BottomNavigationBar和BottomNavigationBarItem。在这一节中，我们将介绍如何使用这两个组件来创建底部导航栏的基本结构。

3.1 使用BottomNavigationBar

BottomNavigationBar是Flutter提供的一个内置组件，用于创建底部导航栏。它接受一个items参数，该参数是一个包含BottomNavigationBarItem的列表，每个BottomNavigationBarItem代表底部导航栏的一个导航项。

下面是一个简单的示例，演示了如何使用BottomNavigationBar创建一个具有三个导航项的底部导航栏：

class MyBottomNavigationBar extends StatefulWidget {
  @override
  _MyBottomNavigationBarState createState() => _MyBottomNavigationBarState();
}

class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation Bar Example'),
      ),
      body: Center(
        child: Text('Selected Index: $_selectedIndex'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.blue,
        onTap: _onItemTapped,
      ),
    );
  }
}

在这个示例中，我们创建了一个StatefulWidget，其中包含一个BottomNavigationBar作为底部导航栏。BottomNavigationBar包含三个导航项，分别是“Home”、“Search”和“Profile”，每个导航项都有一个图标和标签。通过currentIndex属性和onTap回调函数，我们可以实现底部导航栏与页面的切换功能。

3.2 BottomNavigationBarItem

BottomNavigationBarItem是用于定义底部导航栏中每个导航项的组件。它接受一个icon参数和一个label参数，分别用于指定导航项的图标和标签。

下面是一个简单的示例，演示了如何使用BottomNavigationBarItem创建一个导航项：

BottomNavigationBarItem(
  icon: Icon(Icons.home),
  label: 'Home',
)

在这个示例中，我们创建了一个包含“Home”标签和home图标的导航项。您可以根据自己的需求自定义图标和标签，以创建符合应用程序主题和设计风格的底部导航栏。

4. 自定义底部导航栏外观

底部导航栏的外观对于应用程序的整体风格和用户体验至关重要。Flutter提供了丰富的选项，使开发者可以轻松自定义底部导航栏的外观，包括选中项的颜色和图标、背景颜色和形状、导航栏的高度以及图标的大小等。在本节中，我们将介绍如何实现底部导航栏的自定义外观。

4.1 更改选中项颜色和图标

通过设置BottomNavigationBar的selectedItemColor属性，可以更改选中项的颜色。此外，您还可以使用selectedIconTheme属性来自定义选中项的图标主题，包括颜色、大小和样式等。

下面是一个示例，演示了如何更改选中项的颜色和图标：

BottomNavigationBar(
  items: <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.search),
      label: 'Search',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: 'Profile',
    ),
  ],
  currentIndex: _selectedIndex,
  selectedItemColor: Colors.blue, // 更改选中项的颜色
  selectedIconTheme: IconThemeData(size: 30), // 更改选中项的图标大小
  onTap: _onItemTapped,
),

4.2 自定义背景颜色和形状

要自定义底部导航栏的背景颜色和形状，您可以使用BottomNavigationBar的backgroundColor属性来指定背景颜色，使用elevation属性来设置阴影效果，还可以使用shape属性来定义导航栏的形状，如圆角矩形等。

下面是一个示例，演示了如何自定义底部导航栏的背景颜色和形状：

BottomNavigationBar(
  items: <BottomNavigationBarItem>[
    // 导航项...
  ],
  currentIndex: _selectedIndex,
  backgroundColor: Colors.grey[200], // 设置背景颜色
  elevation: 10, // 设置阴影效果
  shape: RoundedRectangleBorder( // 设置导航栏形状为圆角矩形
    borderRadius: BorderRadius.vertical(
      top: Radius.circular(20),
    ),
  ),
  onTap: _onItemTapped,
),

4.3 调整导航栏高度和图标大小

要调整底部导航栏的高度，可以使用BottomNavigationBar的fixedHeight属性来指定固定高度，也可以使用BottomNavigationBar的selectedIconTheme属性来调整图标的大小。

下面是一个示例，演示了如何调整底部导航栏的高度和图标大小：

BottomNavigationBar(
  items: <BottomNavigationBarItem>[
    // 导航项...
  ],
  currentIndex: _selectedIndex,
  selectedIconTheme: IconThemeData(size: 30), // 调整图标大小
  fixedHeight: 80, // 设置底部导航栏的固定高度
  onTap: _onItemTapped,
),

通过上述方法，您可以灵活地自定义底部导航栏的外观，以满足应用程序的设计需求和用户体验要求。

5. 底部导航栏与页面切换

底部导航栏不仅是一个用于导航的界面组件，还可以与应用程序的不同页面进行切换，以提供更丰富的用户体验。在Flutter中，实现底部导航栏与页面切换通常有两种常见的方式：使用IndexedStack和利用PageView。本节将分别介绍这两种方式的实现方法。

5.1 使用IndexedStack实现页面切换

IndexedStack是Flutter提供的一个用于显示多个子widget中的一个的组件。它类似于Stack，但是只能显示一个子widget，其子widget的索引由index属性指定。通过将IndexedStack作为底部导航栏的主体部分，可以实现底部导航栏与页面的切换效果。

下面是一个示例，演示了如何使用IndexedStack实现页面切换：

class MyBottomNavigationBar extends StatefulWidget {
  @override
  _MyBottomNavigationBarState createState() => _MyBottomNavigationBarState();
}

class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation Bar Example'),
      ),
      body: IndexedStack(
        index: _selectedIndex,
        children: <Widget>[
          HomeScreen(),
          SearchScreen(),
          ProfileScreen(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.blue,
        onTap: _onItemTapped,
      ),
    );
  }
}

在这个示例中，我们将IndexedStack作为Scaffold的body部分，其子widget包含了三个不同的页面（HomeScreen、SearchScreen和ProfileScreen）。通过设置_bottomNavigationBarState类中的_onItemTapped函数，可以实现底部导航栏与页面的切换效果。

5.2 利用PageView实现页面滑动切换

另一种常见的底部导航栏与页面切换方式是利用Flutter提供的PageView组件，它可以实现页面的滑动切换效果。通过将多个页面放置在一个PageView中，并配合底部导航栏实现页面切换，可以为用户提供更加流畅的导航体验。

下面是一个示例，演示了如何利用PageView实现页面滑动切换：

class MyBottomNavigationBar extends StatefulWidget {
  @override
  _MyBottomNavigationBarState createState() => _MyBottomNavigationBarState();
}

class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
  int _selectedIndex = 0;
  PageController _pageController = PageController();

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
    _pageController.animateToPage(
      index,
      duration: Duration(milliseconds: 300),
      curve: Curves.ease,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation Bar Example'),
      ),
      body: PageView(
        controller: _pageController,
        children: <Widget>[
          HomeScreen(),
          SearchScreen(),
          ProfileScreen(),
        ],
        onPageChanged: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.blue,
        onTap: _onItemTapped,
      ),
    );
  }
}

在这个示例中，我们使用PageView作为Scaffold的body部分，其子widget包含了三个不同的页面（HomeScreen、SearchScreen和ProfileScreen）。通过设置_bottomNavigationBarState类中的_onItemTapped函数，可以实现底部导航栏与页面的切换效果，并利用PageView的onPageChanged回调函数实现页面切换时的同步更新。

6. 底部导航栏与状态管理

底部导航栏通常需要与应用程序的状态进行交互，例如根据用户的操作更新当前选中的导航项。Flutter提供了多种状态管理方法，其中包括使用Provider和Bloc进行状态管理。在本节中，我们将介绍如何利用这两种方法来实现底部导航栏的状态管理。

6.1 使用Provider进行状态管理

Provider是Flutter生态中最常用的状态管理库之一，它提供了一种简单而强大的方式来管理应用程序的状态，并在不同组件之间进行状态共享。通过将底部导航栏的选中项状态提升至顶层，然后使用Provider在底部导航栏和其他相关组件之间共享状态，可以实现底部导航栏的状态管理。

下面是一个示例，演示了如何使用Provider进行底部导航栏的状态管理：

class NavigationProvider extends ChangeNotifier {
  int _selectedIndex = 0;

  int get selectedIndex => _selectedIndex;

  void setSelectedIndex(int index) {
    _selectedIndex = index;
    notifyListeners();
  }
}

class MyBottomNavigationBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => NavigationProvider(),
      child: Scaffold(
        appBar: AppBar(
          title: Text('Bottom Navigation Bar Example'),
        ),
        body: Consumer<NavigationProvider>(
          builder: (context, provider, child) {
            return IndexedStack(
              index: provider.selectedIndex,
              children: <Widget>[
                HomeScreen(),
                SearchScreen(),
                ProfileScreen(),
              ],
            );
          },
        ),
        bottomNavigationBar: Consumer<NavigationProvider>(
          builder: (context, provider, child) {
            return BottomNavigationBar(
              items: <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  label: 'Home',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.search),
                  label: 'Search',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.person),
                  label: 'Profile',
                ),
              ],
              currentIndex: provider.selectedIndex,
              selectedItemColor: Colors.blue,
              onTap: (index) {
                provider.setSelectedIndex(index);
              },
            );
          },
        ),
      ),
    );
  }
}

在这个示例中，我们首先创建了一个NavigationProvider类来管理底部导航栏的选中项状态。然后，我们使用ChangeNotifierProvider将NavigationProvider提供给底部导航栏和相关页面组件，并使用Consumer在这些组件中访问和更新状态。通过这种方式，我们实现了底部导航栏与状态的解耦，使其可以轻松管理和更新导航栏的选中项状态。

6.2 使用Bloc进行状态管理

Bloc是另一个常用的Flutter状态管理库，它基于流（Stream）和事件（Event）的模式来管理应用程序的状态，并提供了一种清晰、可维护的方式来组织和处理复杂的业务逻辑。通过创建一个NavigationBloc来处理底部导航栏的状态，并在需要时向Bloc发送事件来更新状态，可以实现底部导航栏的状态管理。

下面是一个示例，演示了如何使用Bloc进行底部导航栏的状态管理：

class NavigationBloc extends Bloc<int, int> {
  NavigationBloc() : super(0);

  @override
  Stream<int> mapEventToState(int event) async* {
    yield event;
  }
}

class MyBottomNavigationBar extends StatelessWidget {
  final NavigationBloc _navigationBloc = NavigationBloc();

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => _navigationBloc,
      child: BlocBuilder<NavigationBloc, int>(
        builder: (context, selectedIndex) {
          return Scaffold(
            appBar: AppBar(
              title: Text('Bottom Navigation Bar Example'),
            ),
            body: IndexedStack(
              index: selectedIndex,
              children: <Widget>[
                HomeScreen(),
                SearchScreen(),
                ProfileScreen(),
              ],
            ),
            bottomNavigationBar: BottomNavigationBar(
              items: <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  label: 'Home',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.search),
                  label: 'Search',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.person),
                  label: 'Profile',
                ),
              ],
              currentIndex: selectedIndex,
              selectedItemColor: Colors.blue,
              onTap: (index) {
                _navigationBloc.add(index);
              },
            ),
          );
        },
      ),
    );
  }

  @override
  void dispose() {
    _navigationBloc.close();
    super.dispose();
  }
}

在这个示例中，我们首先创建了一个NavigationBloc类来处理底部导航栏的状态，它继承自Bloc并定义了一个mapEventToState方法来处理事件。然后，我们使用BlocProvider将NavigationBloc提供给底部导航栏和相关页面组件，并使用BlocBuilder在这些组件中监听和更新状态。通过向Bloc发送事件，我们可以实现底部导航栏的状态管理，并根据需要更新导航栏的选中项状态。

7. 底部导航栏实现高级功能

底部导航栏不仅可以简单地实现基本的导航功能，还可以通过一些高级功能来增强用户体验和提升应用的交互性。在本节中，我们将介绍如何实现底部导航栏的一些高级功能，包括添加徽章、动态更改导航栏项以及实现导航栏的动画效果。

7.1 添加徽章

徽章是一种常用的提示标记，用于向用户展示一些重要信息，例如未读消息数量、新通知等。在底部导航栏中添加徽章可以让用户更快速地了解到某个导航项的状态，从而提升用户体验。

下面是一个示例，演示了如何在底部导航栏中添加徽章：

BottomNavigationBarItem(
  icon: Stack(
    children: <Widget>[
      Icon(Icons.notifications),
      Positioned(
        right: 0,
        child: Container(
          padding: EdgeInsets.all(2),
          decoration: BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.circular(10),
          ),
          constraints: BoxConstraints(
            minWidth: 16,
            minHeight: 16,
          ),
          child: Text(
            '5',
            style: TextStyle(
              color: Colors.white,
              fontSize: 10,
            ),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    ],
  ),
  label: 'Notifications',
)

在这个示例中，我们将底部导航栏中的一个导航项的图标包裹在一个Stack中，并在图标右上角添加一个Container作为徽章。通过设置Container的背景颜色、圆角和文本内容，我们可以实现不同样式的徽章，并通过动态改变文本内容来实现不同数量的提示。

7.2 动态更改导航栏项

有时候我们需要根据用户的登录状态、权限等动态地更改底部导航栏的内容，例如显示不同的导航项或调整某个导航项的样式。Flutter提供了灵活的方式来实现这一功能，可以根据需要在运行时动态更改底部导航栏的项。

下面是一个示例，演示了如何在运行时动态更改底部导航栏的项：

class MyBottomNavigationBar extends StatefulWidget {
  @override
  _MyBottomNavigationBarState createState() => _MyBottomNavigationBarState();
}

class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
  bool _isLoggedIn = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation Bar Example'),
      ),
      body: Center(
        child: Text('Dynamic Content'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: _isLoggedIn
            ? <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  label: 'Home',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.search),
                  label: 'Search',
                ),
              ]
            : <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(Icons.login),
                  label: 'Login',
                ),
              ],
        onTap: (index) {
          // 处理导航项点击事件
        },
      ),
    );
  }
}

在这个示例中，我们根据用户的登录状态动态选择底部导航栏中显示的导航项。如果用户已登录，则显示“Home”和“Search”导航项；如果用户未登录，则显示“Login”导航项。通过在build方法中根据条件动态设置items属性，我们可以实现在运行时动态更改底部导航栏的内容。

7.3 实现底部导航栏的动画效果

为了提升用户体验，有时候我们还可以为底部导航栏添加一些动画效果，例如切换导航项时的渐变动画、滑动导航栏时的缩放动画等。Flutter提供了丰富的动画支持，可以通过AnimatedContainer、AnimatedOpacity、AnimatedCrossFade等组件来实现各种动画效果。

下面是一个示例，演示了如何为底部导航栏添加渐变动画效果：

class MyBottomNavigationBar extends StatefulWidget {
  @override
  _MyBottomNavigationBarState createState() => _MyBottomNavigationBarState();
}

class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation Bar Example'),
      ),
      body: Center(
        child: Text('Selected Index: $_selectedIndex'),
      ),
      bottomNavigationBar: AnimatedContainer(
        duration: Duration(milliseconds: 300),
        color: _selectedIndex == 0 ? Colors.blue : Colors.green, // 添加渐变动画效果
        child: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.search),
              label: 'Search',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'Profile',
            ),
          ],
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.white,
          onTap: (index) {
            setState(() {
              _selectedIndex = index;
            });
          },
        ),
      ),
    );
  }
}

在这个示例中，我们使用AnimatedContainer包裹BottomNavigationBar，通过在build方法中根据当前选中的导航项来动态改变容器的颜色，从而实现了底部导航栏的渐变动画效果。通过调整duration属性的值，可以控制动画的持续时间，实现不同的动画效果。

总结

底部导航栏是移动应用界面设计中常见且重要的组件之一，在Flutter中实现底部导航栏不仅简单易行，而且具有丰富的功能和灵活的定制性。通过本文的介绍，我们对如何使用Flutter构建底部导航栏有了全面的了解。

我们首先介绍了创建底部导航栏的基本结构，包括使用BottomNavigationBar和BottomNavigationBarItem组件来搭建导航栏的基本框架。接着，我们讨论了如何自定义底部导航栏的外观，包括更改选中项的颜色和图标、自定义背景颜色和形状、以及调整导航栏的高度和图标大小等。

在实现底部导航栏与页面切换方面，我们介绍了两种常见的方法：使用IndexedStack和利用PageView。无论是静态页面切换还是动态滑动切换，都可以根据实际需求选择合适的方法来实现。

此外，我们还探讨了如何利用状态管理库（如Provider和Bloc）来管理底部导航栏的状态，以及如何实现一些高级功能，如添加徽章、动态更改导航栏项以及实现动画效果等。

综上所述，通过深入学习和实践，开发者可以轻松地构建出功能强大、外观精美的底部导航栏，为移动应用的用户体验和功能导航提供良好的支持。在实际开发中，建议根据应用的需求和设计风格，灵活选择和组合不同的技术手段，打造出更加优秀的底部导航栏。

作者信息

作者 ： 繁依Fanyi
CSDN： https://techfanyi.blog.csdn.net
掘金：https://juejin.cn/user/4154386571867191

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1552609.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Linux用户及用户组权限

Linux用户及用户组权限

一、用户和用户组 功能项命令实例作用用户组cat /etc/group查看当前系统存在的用户组groupadd testing添加一个新的用户组testingcat /etc/group查看组是否被新增成功groupmod -n test testing将testing重命名成testgroupdel test删除组testgroups root查看用户root所在的所有…
阅读更多...
tdesign坑之EnhancedTable树形结构默认展开所有行

tdesign坑之EnhancedTable树形结构默认展开所有行

⚠️在官方实例中&#xff0c;树形结构的表格提供了2种方法控制展开全部节点&#xff1a; 一是通过配置属性tree.defaultExpandAll为true代表默认展开全部节点&#xff08;仅默认情况有效&#xff09;&#xff1b; 二是使用组件实例方法expandAll()可以自由控制树形结构的展开…
阅读更多...
“直播曝光“有哪些媒体直播分流资源？

“直播曝光“有哪些媒体直播分流资源？

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 我们线下举办活动时&#xff0c;往往希望活动进行更大的曝光&#xff0c;随着视频直播越来越被大众认可&#xff0c;甚至成了活动的标配&#xff0c;那么做活动视频直播的时候&#xff0…
阅读更多...
R语言批量计算t检验，输出pvalue和均值

R语言批量计算t检验，输出pvalue和均值

1.输入数据如下&#xff1a; 2.代码如下 setwd("E:/R/Rscripts/rG4相关绘图") # 读取CSV文件 data <- read.csv("box-cds-ABD-不同类型rg4-2.csv", stringsAsFactors FALSE)# 筛选出Type2列为指定五种类型的数据 filtered_data <- subset(data, …
阅读更多...
LockSupport与线程中断机制

LockSupport与线程中断机制

中断机制是个协商机制 Interrupt(): 将中断状态设置为true Interrupted():&#xff08;静态方法&#xff09; 1.返回当前线程的中断状态 2.将中断状态清零并设置为false is Interrupted(): 判断当前线程是否被中断 如何停止中断运行中的线程&#xff1f; 一个线程不应该由…
阅读更多...
提取html工具封装和应用

提取html工具封装和应用

提取html工具封装和应用 BeautifulSoup库和介绍BeautifulSoup使用BeautifulSoup重点方法BeautifulSoup其他方法 认证参数化实现创建json文件导包&#xff08;参数化&#xff09;编写测试用例技术难点--判断验证码不同 BeautifulSoup库和介绍 BeautifulSoup使用 1、导包 2、实例…
阅读更多...
C# OpenCvSharp 轮廓检测

C# OpenCvSharp 轮廓检测

目录 效果 代码 下载 效果 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using OpenCvSharp; using OpenCvSharp.…
阅读更多...
kubernetes K8s的监控系统Prometheus升级Grafana,来一个酷炫的Node监控界面(二)

kubernetes K8s的监控系统Prometheus升级Grafana,来一个酷炫的Node监控界面(二)

上一篇文章《kubernetes K8s的监控系统Prometheus安装使用(一)》中使用的监控界面总感觉监控的节点数据太少&#xff0c;不能快算精准的判断出数据节点运行的状况。 今天我找一款非常酷炫的多维度数据监控界面&#xff0c;能够非常有把握的了解到各节点的数据&#xff0c;以及运…
阅读更多...
【js刷题：数据结构数组篇之长度最小的子数组】

【js刷题：数据结构数组篇之长度最小的子数组】

长度最小的子数组 一、题目二、方法1.暴力解法2.滑动窗口是什么 滑动窗口的起始位置滑动窗口的结束位置 一、题目 给定一个含有 n 个正整数的数组和一个正整数 s &#xff0c;找出该数组中满足其和 ≥ s 的长度最小的 连续 子数组&#xff0c;并返回其长度。如果不存在符合条件…
阅读更多...
移动端开发思考:Uniapp的上位替代选择

移动端开发思考:Uniapp的上位替代选择

文章目录 前言跨平台开发技术需求技术选型uniappFlutterMAUIAvalonia安卓原生 Flutter开发尝试Avalonia开发测试测试项目新建项目代码MainViewMainViewModel 发布/存档 MAUI实战&#xff0c;简单略过打包和Avalonia差不多 总结 前言 作为C# .NET程序员&#xff0c;我有一些移动…
阅读更多...
虚拟机-从头配置Ubuntu18.04（包括anaconda,cuda,cudnn,pycharm,ros,vscode）

虚拟机-从头配置Ubuntu18.04（包括anaconda,cuda,cudnn,pycharm,ros,vscode）

最好先安装anaconda后cuda和cudnn&#xff0c;因为配置环境的时候可能conda会覆盖cuda的路径&#xff08;不确定这种说法对不对&#xff0c;这里只是给大家的建议&#xff09; 准备工作&#xff1a; 1.Ubuntu18.04&#xff0c;x86_64&#xff0c;amd64 虚拟机下载和虚拟机Ubu…
阅读更多...
鸿蒙OS开发实例：【手撸服务卡片】

鸿蒙OS开发实例：【手撸服务卡片】

介绍 服务卡片指导文档位于“开发/应用模型/Stage模型开发指导/Stage模型应用组件”路径下&#xff0c;说明其极其重要。 本篇文章将分享实现服务卡片的过程和代码 准备 请参照[官方指导]&#xff0c;创建一个Demo工程&#xff0c;选择Stage模型 鸿蒙OS开发更多内容↓点击…
阅读更多...
cookie,sessionStorage,localStorage的区别及应用场景、http状态码含义、使用token登录、无感登录

cookie,sessionStorage,localStorage的区别及应用场景、http状态码含义、使用token登录、无感登录

浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式&#xff0c;可以利用cookie&#xff0c;session等跟服务端进行数据交互。 浏览器的存储方式有哪些&#xff1f; 1.cookiesH5标准前的本地存储方式兼容性好&#xff0c;请求头自带cookie存储量小&#xff0c;资源浪费…
阅读更多...
Apache Hive的基本使用语法（二）

Apache Hive的基本使用语法（二）

Hive SQL操作 7、修改表 表重命名 alter table score4 rename to score5;修改表属性值 # 修改内外表属性 ALTER TABLE table_name SET TBLPROPERTIES("EXTERNAL""TRUE"); # 修改表注释 ALTER TABLE table_name SET TBLPROPERTIES (comment new_commen…
阅读更多...
某某消消乐增加步数漏洞分析

某某消消乐增加步数漏洞分析

一、漏洞简介 1&#xff09; 漏洞所属游戏名及基本介绍&#xff1a;某某消消乐&#xff0c;三消游戏&#xff0c;类似爱消除。 2&#xff09; 漏洞对应游戏版本及平台&#xff1a;某某消消乐Android 1.22.22。 3&#xff09; 漏洞功能&#xff1a;增加游戏步数。 4&#xf…
阅读更多...
zabbix通过jmx监控Tongweb7企业版（by lqw）

zabbix通过jmx监控Tongweb7企业版（by lqw）

一.tongweb配置相关启动参数 参考Zabbix 监控 Tomcat 服务 可以在控制台页面&#xff0c;或者在tongweb的安装目录的bin目录下&#xff0c;找到external.vmoptions&#xff0c;进行配置&#xff1a; 配置内容如下&#xff1a; -Dcom.sun.management.jmxremote -Dcom.sun.mana…
阅读更多...
ES学习日记(一)-------单节点安装启动

ES学习日记(一)-------单节点安装启动

基于ES7.4.1编写,其实一开始用的最新的8.1,但是问题太多了!!!!不稳定,降到7.4 下载好的安装包上传到服务器或虚拟机,创建ES目录,命令mkdir -p /路径xxxx 复制安装包到指定路径并解压: tar zxvf elasticsearch-8.1.0-linux-x86_64.tar.gz -C /usr/local/es/ 进入bin目录安装,命…
阅读更多...
学习transformer模型-矩阵乘法；与点积dot product的关系；计算attention

学习transformer模型-矩阵乘法；与点积dot product的关系；计算attention

矩阵乘法&#xff1a; 1、当矩阵A的列数&#xff08;column&#xff09;等于矩阵B的行数&#xff08;row&#xff09;时&#xff0c;A与B可以相乘。 Ankie的评论&#xff1a;一个人是站着的&#xff0c;一个人是躺着的&#xff0c;站着的高度躺着的长度。 在计算attention的时候…
阅读更多...
基于单片机工业生产现场的光照强度控制系统设计

基于单片机工业生产现场的光照强度控制系统设计

**单片机设计介绍&#xff0c;基于单片机工业生产现场的光照强度控制系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机工业生产现场的光照强度控制系统设计概要主要包括以下几个关键部分&#xff1a;硬件设计、…
阅读更多...
Android Studio不显示ADB Wi-Fi和Device Explorer的解决办法

Android Studio不显示ADB Wi-Fi和Device Explorer的解决办法

我一直使用Android Studio。最近发现打开个别项目时&#xff0c;不显示ADB Wi-Fi和Device Explorer的图标&#xff0c;而有的项目就会显示。开始以为是插件错误&#xff0c;于是卸载了ADB Wi-Fi插件&#xff0c;并重新安装。但问题依旧。 后来发现&#xff0c;原来是在菜单的“…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023