经典的flutter 选项卡源代码

最新推荐文章于 2023-11-03 23:34:55 发布

原创

最新推荐文章于 2023-11-03 23:34:55 发布 · 387 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter 选项卡

这篇博客展示了如何在Flutter中创建一个带有固定底部导航栏的选项卡应用。通过设置`BottomNavigationBarType.fixed`属性，解决了选项卡不显示的问题。代码示例中包括了底部导航栏的构建，以及切换选项卡时的内容更新。

经典的flutter 选项卡源代码

//查看文档，这里有一个属性，解决选项卡不显示的问题
type: BottomNavigationBarType.fixed,

import 'package:flutter/material.dart';

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

/// This is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bo