flutter 如何将应用程序栏文本标题与其旁边的按钮居中

m0rkklqb  于 2023-03-04  发布在  Flutter
关注(0)|答案(2)|浏览(164)

我试着把我的文本和两个图标按钮放在中间,这两个按钮是中间的箭头。我试着添加填充,但它似乎有点蛮力,不知道是否有一个合适的方法。

return Scaffold(
  appBar: AppBar(
    title: Row(
      children: [
        IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            // do something when the back arrow button is tapped
          },
          color: Colors.black,
        ),
        Text(
          'Today',
          style: TextStyle(
            color: Colors.black, // set the color of the title text
          ),
        ),
        IconButton(
          icon: Icon(Icons.arrow_forward),
          onPressed: () {
            // do something when the forward arrow button is tapped
          },
          color: Colors.black,
        ),
      ],
    ),
    backgroundColor: Theme.of(context).scaffoldBackgroundColor,
    centerTitle: true,
    leading: IconButton(
      icon: Icon(
        Icons.menu,
        color: Colors.black,
      ),
      onPressed: () {},
    ),
    actions: [
      Padding(
        padding: EdgeInsets.only(
            right: 12.0), // set the horizontal padding to 16.0
        child: IconButton(
          icon: Icon(
            Icons.settings,
            color: Colors
                .black, // set the color of the search icon button to white
          ),
          onPressed: () {},
        ),
      ),
    ],
    elevation: 0,
  ),

我还看到你可以添加一个间隔小部件,但不认为这是明智的。

enxuqcxy

enxuqcxy1#

我只需要将小部件 Package 在一个中心小部件中,并使用mainAxisAlignment

return Scaffold(
  appBar: AppBar(
    title: Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          IconButton(
            icon: Icon(Icons.arrow_back),
            onPressed: () {
              // do something when the back arrow button is tapped
            },
            color: Colors.black,
          ),
          Text(
            'Today',
            style: TextStyle(
              color: Colors.black, // set the color of the title text
            ),
          ),
          IconButton(
            icon: Icon(Icons.arrow_forward),
            onPressed: () {
              // do something when the forward arrow button is tapped
            },
            color: Colors.black,
          ),
        ],
      ),
    ),
    backgroundColor: Theme.of(context).scaffoldBackgroundColor,
    centerTitle: true,
    leading: IconButton(
      icon: Icon(
        Icons.menu,
        color: Colors.black,
      ),
      onPressed: () {},
    ),
    actions: [
      Padding(
        padding: EdgeInsets.only(
            right: 12.0), // set the horizontal padding to 16.0
        child: IconButton(
          icon: Icon(
            Icons.settings,
            color: Colors
                .black, // set the color of the search icon button to white
          ),
          onPressed: () {},
        ),
      ),
    ],
    elevation: 0,
  ),
cu6pst1q

cu6pst1q2#

有两种可能的解决方案:

Row(
   mainAxisAlignment: MainAxisAlignment.center,
   children: [...]
 );

Row(
   mainAxisSize: MainAxisSize.min,
   children: [...]
 );

相关问题