时间戳

首页 > 解决方案 > 如何突出显示自定义底部应用栏图标并更改应用栏（顶部）标题文本颤动

flutter - 如何突出显示自定义底部应用栏图标并更改应用栏（顶部）标题文本颤动

问题描述

您好，我是一个完整的菜鸟，但几天来一直在尝试解决一个问题。我希望这些图标在单击时突出显示，并且 AppBar 标题会随着不同的页面而变化。以下代码只是我的骨架，每个按钮将页面更改为其他页面，但为了保持简单，我使用了基本页面。在我的实际代码中，每个页面都返回一个带有正文和正文中的内容的脚手架。我应该在每个页面上添加一个 AppBar 并在那里更改标题吗？该应用程序似乎需要做很多工作。我真的很感激你能提供的任何帮助。

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DemoPage(),
    );
  }
}

class DemoPage extends StatefulWidget {
  @override
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  PageController _myPage = PageController(initialPage: 0);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Title'
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        child: Container(
          height: 75,
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Spacer(),
              IconButton(
                iconSize: 30.0,
                icon: Icon(Icons.home),
                onPressed: () {
                  setState(() {
                    _myPage.jumpToPage(0);
                  });
                },
              ),
              Spacer(),
              IconButton(
                iconSize: 30.0,
                icon: Icon(Icons.search),
                onPressed: () {
                  setState(() {
                    _myPage.jumpToPage(1);
                  });
                },
              ),
              Spacer(flex: 5,),
              IconButton(
                iconSize: 30.0,
                icon: Icon(Icons.notifications),
                onPressed: () {
                  setState(() {
                    _myPage.jumpToPage(2);
                  });
                },
              ),
              Spacer(),
              IconButton(
                iconSize: 30.0,
                icon: Icon(Icons.list),
                onPressed: () {
                  setState(() {
                    _myPage.jumpToPage(3);
                  });
                },
              ),
              Spacer(),
            ],
          ),
        ),
      ),
      body: PageView(
        controller: _myPage,
        onPageChanged: (int) {
          print('Page Changes to index $int');
        },
        children: <Widget>[
          Center(
            child: Container(
              child: Text('Page 0'),
            ),
          ),
          Center(
            child: Container(
              child: Text('Page 1'),
            ),
          ),
          Center(
            child: Container(
              child: Text('Page 2'),
            ),
          ),
          Center(
            child: Container(
              child: Text('Page 3'),
            ),
          )
        ],
      ),
      floatingActionButton: Container(
        height: 65.0,
        width: 65.0,
        child: FittedBox(
          child: FloatingActionButton(
            onPressed: () {},
            child: Icon(
              Icons.add,
              color: Colors.white,
            ),
            // elevation: 5.0,
          ),
        ),
      ),
    );
  }
}

标签： flutterdart

解决方案

创建一个列表 _appbartitle，其中包含每个选项卡所需的标题列表

设置一个全局整数来表示您正在查看的页面

int page=0;

page==0 表示主页，page==1 表示设置

_appbarTitle=['Home','Settings',];

AppBar(title:Text(_appbarTitle[page]))

现在用这个重写每个 IconButton

 IconButton(
                iconSize: 30.0,
                icon: Icon(Icons.home,color:(page==0)?Colors.Blue:Colors.Black  ),
                onPressed: () {
                  setState(() {
                     page=1;
                    _myPage.jumpToPage(0);
                  });
                },
              )

这里发生的情况是，当我单击 BottomAppBar 中的 IconButton 时，它会相应地设置页面变量并重建状态，这会导致根据列表 _appbarTitle 更改 Appbar 的标题，并将所选 IconButton 的颜色设置为蓝色。

推荐阅读