Question

我正在尝试在选择消息时更改appBar。我已经制作了两个小部件，但无法实现所需的功能。创建了一个可以在整个代码中访问的对象。尝试为两个应用栏创建一个有状态的窗口小部件。我需要从代码中访问appBarChange，因为我将从为主体创建的小部件中调用函数。

var appchangevar = _HomeState();

Widget _defaultBar(BuildContext context){
  return AppBar(
    titleSpacing: 0,
    actions: <Widget>[
      IconButton(
        icon: Icon(Icons.search,
            color: Theme.of(context).iconTheme.color
        ),
        onPressed: () {},
      ),
    ],
  );
}


Widget _editingBar(BuildContext context){
  return AppBar(
    leading: IconButton(
      icon: Icon(LineIcons.times),
      color: Theme.of(context).iconTheme.color,
      onPressed: (){
        appchangevar.appBarChange();
      },
    ),
    actions: <Widget>[
      IconButton(
        icon: Icon(LineIcons.check
        ),
      ),
      IconButton(
        icon: Icon(LineIcons.envelope),
      ),
    ],
  );
}




class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {


  bool _messageSelected = true;

  void appBarChange(){
    setState(() {
      _messageSelected = !_messageSelected;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _messageSelected ? _editingBar(context) : _defaultBar(context),

Answer 1

您可以将功能传递给相应的小部件，并在onTap上更改应用栏。

在完整的最小代码下方结帐，以演示如何操作。

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  bool _messageSelected = true;

  void appBarChange() {
    setState(() {
      _messageSelected = !_messageSelected;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: _messageSelected
            ? _defaultBar(context, appBarChange)
            : _editingBar(context, appBarChange),
      ),
    );
  }
}

Widget _defaultBar(BuildContext context, Function changeAppBar) {
  return AppBar(
    titleSpacing: 0,
    actions: <Widget>[
      IconButton(
        icon: Icon(Icons.search, color: Theme.of(context).iconTheme.color),
        onPressed: () {
          changeAppBar();
        },
      ),
    ],
  );
}

Widget _editingBar(BuildContext context, Function changeAppBar) {
  return AppBar(
    leading: IconButton(
      icon: Icon(Icons.comment),
      color: Theme.of(context).iconTheme.color,
      onPressed: () {
        changeAppBar();
      },
    ),
    actions: <Widget>[
      IconButton(
        onPressed: () {},
        icon: Icon(Icons.check),
      ),
      IconButton(
        onPressed: () {},
        icon: Icon(Icons.event),
      ),
    ],
  );
}

Answer 2

遵循以下代码：

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
 return MaterialApp(
    home: Scaffold(
       appBar: AppBar(
         title: Text('Change Text Dynamically on Button Click')
         ),
        body: Center(
          child: UpdateText()
          )
        )
      );
    }
  }

class UpdateText extends StatefulWidget {

  UpdateTextState createState() => UpdateTextState();

}

class UpdateTextState extends State {

 String textHolder = 'Old Sample Text...!!!';

 changeText() {

  setState(() {
   textHolder = 'New Sample Text...'; 
  });

}

@override
Widget build(BuildContext context) {
return Scaffold(
  body: Center(child: Column(
    children: <Widget>[
    Container(
      padding: EdgeInsets.fromLTRB(20, 20, 20, 20),
      child: Text('$textHolder', 
        style: TextStyle(fontSize: 21))),

    RaisedButton(
      onPressed: () => changeText(),
      child: Text('Click Here To Change Text Widget Text Dynamically'),
      textColor: Colors.white,
      color: Colors.green,
      padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
     ),  
   ]))
  );
 }
}

这是更改简单的Text（）小部件的示例，但是您可以操纵AppBar支持的任何小部件

单击按钮更改appBar

2 个答案: