如何在颤动中更改 AppBar 标题(在图像资产和文本之间)?

时间:2020-12-23 10:18:36

标签: flutter appbar

我想用 HomePage 中的图像资源和 ListPage 中的文本设置 Title appbar。我已经尝试使用此代码

import 'package:flutter/material.dart';
import 'package:teld/page/homepage/homePage.dart';
import 'package:teld/page/listpage/listPage.dart';
import 'package:teld/page/settingPage.dart';



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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(fontFamily: 'Roboto'),
      home: NavStructure(),
      );
  }
}

class NavStructure extends StatefulWidget {
  @override
  _NavStructureState createState() => _NavStructureState();
}

class _NavStructureState extends State<NavStructure>{
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
  int _currentIndex = 0;
  var _title;

  final _page = [
    HomePage(),
    ListPage(),
    SettingPage(),
  ];

  void onTapBar(int index) {
    setState(() {
      _currentIndex = index;
      switch(index){
        case 0:{
          _title = Image.asset('assets/TDLogoNB.png', height: 38.0,);
        }break;
        case 1:{
          _title = Text("List Page");
        }break;
        case 2:{
          _title = Text("Setting Page");
        }break;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        elevation: 0,
        centerTitle: true,
        backgroundColor: Colors.white,
        title: _title    //this
        ),
      body: _page[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTapBar,
        currentIndex: _currentIndex,
        items: [
         BottomNavigationBarItem(
           icon: Icon(Icons.home),
           title: Text('Home'),
         ),
         BottomNavigationBarItem(
           icon: Icon(Icons.list_view),
           title: Text('List Page'),
         ),
         BottomNavigationBarItem(
           icon: Icon(Icons.settings),
           title: Text('Setting Page'),
         ),
       ],
     ),

    );
  }
}

我想做的是

  • 应用栏标题在主页中带有图像资源

  • 应用栏标题在 ListPage/其他页面中带有文本

来自我的代码。 ListPage 中的应用栏标题(作为文本)根本没有出现。 HomePage中的“图片资产”也没有出现,直到我第二次打开时才出现“图片资产”

如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

也许你可以试试这个

AppBar(
    title: 0 == _currentIndex ? Image.asset("/assets/....") : Text("..."),
    // ....
),

在这种情况下,_title 不是必需的,您可以省略它