首页 > 解决方案 > Appbar 前导属性中的文本小部件 - 但无法正确显示

问题描述

我想使用带有文本“返回”按钮的 Appbar 我使用下面的代码,但“返回”出现在下面的两行中,Appbar 标题也向下移动。

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,
          ),
        ),
      ),

    ),
  );

有什么我在这里想念的吗?

标签: dartflutterflutter-layout

解决方案


使用 --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,
              ),
            ),
          ),
        ),

推荐阅读