Question

我想使用带有文本“后退”按钮的Appbar我使用以下代码，但是像下面的两行一样，“后退”会出现，Appbar的标题也会向下移动。

Ba

ck

相同的颤振码

final topAppBar = AppBar(
//    elevation: 0.1,
    backgroundColor: Color.fromRGBO(0, 113, 188, 1.0),
    title: Text(
      "MyAppBar",
      style: TextStyle(
        color: Colors.white,
        fontFamily: 'Raleway-ExtraBold',
        fontWeight: FontWeight.w900,
        fontSize: 20.0,
      ),
    ),
    leading: Padding(
      padding: const EdgeInsets.only(left: 0),
      child: FlatButton(
        child: Text(
          "Back",
//          textDirection: TextDirection.ltr,
          style: TextStyle(
            color: Colors.white,
            fontFamily: "Raleway-Medium",
            fontSize: 14.0,
          ),
        ),
      ),

    ),
  );

这里有什么我想念的东西吗？

Answer 1

使用-FittedBox-fit:属性来调整前导小部件。

leading: FittedBox(
         fit: BoxFit.cover,
          child: FlatButton(
            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, // add this to remove padding.
            onPressed: () {},
            child: Text(
              "Back",
//          textDirection: TextDirection.ltr,
              style: TextStyle(
                color: Colors.white,
                fontFamily: "Raleway-Medium",
                fontSize: 14.0,
              ),
            ),
          ),
        ),

Answer 2

使用具有足够宽度的 leadingWidth。

leadingWidth: 80,
leading: Padding(
      padding: const EdgeInsets.only(left: 0),
      child: FlatButton(
        child: Text(
          "Back",
//          textDirection: TextDirection.ltr,
          style: TextStyle(
            color: Colors.white,
            fontFamily: "Raleway-Medium",
            fontSize: 14.0,
          ),
        ),
      ),

Appbar前导属性中的“文本”小部件-但显示不正确

2 个答案: