自定义BottomAppBar

最新推荐文章于 2024-05-18 00:05:22 发布

长沙xtt

最新推荐文章于 2024-05-18 00:05:22 发布

阅读量395

点赞数

文章标签： flutter

本文链接：https://blog.csdn.net/weixin_40746230/article/details/124287813

版权

该博客展示了如何在Flutter中创建一个带有自定义主题和底部导航栏的应用。通过`BottomAppBar`和`FloatingActionButton`，实现了页面间的切换，并且详细解释了如何设置各个页面和导航栏的交互。

摘要由CSDN通过智能技术生成

main.dart

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


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'Flutter 自定义主题样本',
      theme: ThemeData(primarySwatch: Colors.lightBlue),
      home: BottomAppbarDemo(),
    );
  }
}

each_view

import 'package:flutter/material.dart';

class EachView extends StatefulWidget {
  String _title;
  EachView(this._title);

  @override
  State<EachView> createState() => _EachViewState();
}

class _EachViewState extends State<EachView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget._title),
      ),
      body: Center(
        child: Text(widget._title),
      ),
    );
  }
}

bottom_appBar_demo

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

class BottomAppbarDemo extends StatefulWidget {
  const BottomAppbarDemo({Key? key}) : super(key: key);

  @override
  State<BottomAppbarDemo> createState() => _BottomAppbarDemoState();
}

class _BottomAppbarDemoState extends State<BottomAppbarDemo> {
  late List<Widget> _eachView;
  int _index = 0;
  @override
  void initState() {
    super.initState();
    _eachView = [];
    _eachView
      ..add(EachView('home'))
      ..add(EachView('xtt'))
      ..add(EachView('xtt1'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _eachView[_index],
      //可交互使用按钮
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.of(context)
              .push(MaterialPageRoute(builder: (BuildContext context) {
            return EachView('New page');
          }));
        },
        tooltip: 'xtt',
        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(
              onPressed: () {
                setState(() {
                  _index = 0;
                });
              },
              icon: Icon(Icons.home),
              color: Colors.white,
            ),
            IconButton(
              onPressed: () {
                setState(() {
                  _index = 1;
                });
              },
              icon: Icon(Icons.airport_shuttle),
              color: Colors.white,
            ),
          ],
        ),
      ),
    );
  }
}