如何在颤动中更改AppBar中图标的位置？答案

【问题标题】：How to change positions of icons in AppBar in flutter?如何在颤动中更改AppBar中图标的位置？
【发布时间】：2021-04-08 08:55:29
【问题描述】：

我正在尝试将我的“指南针”图标重新定位在应用栏的“搜索”图标附近。每次我尝试在具有更高值 55 的容器中进行更改时，例如“填充：const EdgeInsets.symmetric(horizontal:50)”，我都会收到错误堆栈溢出。此外，当我尝试更改标识（png）时，没有任何反应。请帮忙！ Image

@override
Widget build(BuildContext context) {
  return Scaffold(
      appBar: AppBar(
        flexibleSpace: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: <Color>[Colors.pink[400], Colors.blue[400]]
            ),
          ),
        ),
        title: Row(
          children: [
            Container(
              alignment: Alignment.center,
              height: 40,
              child: SizedBox(
                  child: Image.asset(
                    'assets/images/logox.png',
                  )
              ),
            ),
            Container(
                padding: const EdgeInsets.symmetric(horizontal: 50),
                child: SizedBox(
                    child: Icon(
                  Icons.explore_rounded,
                ))),
            // Container(child: Icon(Icons.explore_rounded)),
          ],
        ),
        actions: [
          GestureDetector(
            onTap: () {
              // authMethods.signOut();
              Navigator.pushReplacement(
                  context,
                  MaterialPageRoute(
                    builder: (context) => SearchScreen(),
                  ));
            },
            child: Container(
                padding: EdgeInsets.symmetric(horizontal: 16),
                child: Icon(Icons.search)),
          )
        ],
      ),
      drawer: MainDrawer(),
      //body: Body(),

      bottomNavigationBar: GradientBottomNavigationBar(
        fixedColor: Colors.white,
        backgroundColorStart: Colors.pink[400],
        backgroundColorEnd: Colors.blue[400],
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: Icon(Icons.home), title: Text('Home')),
          BottomNavigationBarItem(
              icon: Icon(Icons.wallet_membership), title: Text('QUA')),
          BottomNavigationBarItem(
              icon: Icon(Icons.help), title: Text('Help')),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.pink,
        elevation: 50,
        hoverColor: Colors.red,
        autofocus: true,
        onPressed: () {
          print('hi');
        },
        child: Icon(
          Icons.comment,
        ),
        tooltip: 'Pick Image',
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat);
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}

【问题讨论】：

img 溢出ibb.co/VCP3V4t

标签： flutter dart icons appbar

【解决方案1】：

AppBar 小部件中有actions 属性，主要用于在AppBar 中放置图标。在您的情况下，centerTitle 用于将您的图像对齐到中心

输出

完整代码

class MyHomePage extends StatefulWidget {
  final Function onItemPressed;

  MyHomePage({
    Key key,
    this.onItemPressed,
  }) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        flexibleSpace: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: <Color>[Colors.pink[400], Colors.blue[400]]),
          ),
        ),
        centerTitle: true,
        title: Container(
          alignment: Alignment.center,
          height: 40,
          child: SizedBox(
              child: Image.asset(
            'assets/logo.png',
          )),
        ),
        actions: [
          IconButton(
            onPressed: () {},
            icon: Icon(Icons.explore_rounded),
          ),
          IconButton(
            onPressed: () {},
            icon: Icon(Icons.search),
          )
        ],
      ),
    );
  }
}

【讨论】：

【解决方案2】：

Material 应用栏有一个actions 属性，您可以使用它来将搜索和指南针图标放在一起。为了实现同样的remove

Container(
   padding: const EdgeInsets.symmetric(horizontal: 50),
   child: SizedBox(
          child: Icon(
          Icons.explore_rounded,
 ))),

从其当前位置开始并将其添加到搜索按钮上方的actions 属性中。

【讨论】：