Flutter 如何在一个自定义类中设置应用程序栏的高度，以适应颤振中不同的屏幕尺寸？

对于模块化，我在另一个类中定义了我的应用程序栏，如下所示：

class HomeAppBar extends StatefulWidget implements PreferredSizeWidget{


  HomeAppBar({Key key}) : preferredSize = Size.fromHeight(kToolbarHeight*0.8), super(key: key);

  @override
  final Size preferredSize; // default is 56.0

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

class _HomeAppBarState extends State<HomeAppBar> {
  @override
  Widget build(BuildContext context) {
    return Container(
      //height: SizeConfig.blockSizeVertical * 20, // did not work well
      child: AppBar(
          backgroundColor: Colors.white,

          leading: IconButton(
              icon: Icon(Icons.account_circle, color: Colors.black) , onPressed: () => Scaffold.of(context).openDrawer()
          ),

          title: Container(
            //height: SizeConfig.blockSizeVertical * 20, // did not work well
            child: TextField(
              style: TextStyle(
                //fontSize: 40,
                //height: SizeConfig.blockSizeVertical * 1, // did not work well
              ),

              onTap: () {
                FocusScope.of(context).requestFocus(FocusNode());
                Navigator.push(context, PageTransition(type: PageTransitionType.fade, child: Search()));
              },
              decoration: InputDecoration(
                prefixIcon: Icon(Icons.search, color: Colors.black),
                hintText: "Search...",
              ),
            ),
          )
      ),
    );
  }
}

我在主页中初始化sizeconfig

我试了很多，但都没有达到好的效果。我想要的是设置应用程序栏的高度，例如屏幕高度的%10，并且我还想要更改文本字段（即应用程序栏的标题）的高度，以便与应用程序栏的高度相匹配

我想要实现的是这个应用程序栏的更大版本：

我的结局是：

---

您可以看到，如果我尝试增加标签文本大小，图标未对齐，提示文本也会消失。要将appBar高度设置为MediaQuery高度的10%，并使标题垂直居中，可以执行以下操作：

appBar: PreferredSize(
        preferredSize: Size(
          MediaQuery.of(context).size.width,
          MediaQuery.of(context).size.height*.1, // 10% of the height
        ),
        child: AppBar(
          flexibleSpace: Center(child: Text("app name")))
)

---

但是要小心，因为这可能会导致小屏幕和横向旋转的可用性问题。

好的，这是我所能达到的，我认为你想要的：

PreferredSize(
        preferredSize: Size(MediaQuery.of(context).size.width,
        MediaQuery.of(context).size.height*.1),
          child: AppBar(
          backgroundColor: Colors.white,
          flexibleSpace: Row(
            children: <Widget>[
            Expanded(
              flex: 1,
              child: FittedBox(
                child: IconButton(
                  icon: Icon(Icons.account_circle, color: Colors.black) , onPressed: () => Scaffold.of(context).openDrawer()
                ),
              ),
            ),
            Flexible(
              flex: 9,
              child: Container(
              width: MediaQuery.of(context).size.width*.9,
              alignment: Alignment.center,
              child: TextField(
                  textAlignVertical: TextAlignVertical.center,
                  style: TextStyle(
                  ),
                  onTap: () {
                    FocusScope.of(context).requestFocus(FocusNode());
                    Navigator.push(context, MaterialPageRoute(builder: (ctx) => Scaffold()));
                  },
                  decoration: InputDecoration(
                    prefixIcon: Icon(Icons.search, color: Colors.black),
                    hintText: "Search...",
                  ),
                ),
          ),
            )
          ],),
      ),
    )

PreferredSize(
preferredSize:Size（MediaQuery.of（context）.Size.width，
MediaQuery.of（context.size.height*.1），
孩子：AppBar(
背景颜色：Colors.white，
flexibleSpace:行(
儿童：[
扩大(
弹性：1，
孩子：FittedBox(
孩子：我的钮扣(
图标：图标（Icons.account\u circle，颜色：Colors.black），按下时：（）=>Scaffold.of（context.openDrawer（））
),
),
),
灵活的(
弹性：9，
子：容器(
宽度：MediaQuery.of（context）.size.width*.9，
对齐：对齐.center，
孩子：TextField(
textAlignVertical:textAlignVertical.center，
样式：TextStyle(
),
onTap:（）{
FocusScope.of（context.requestFocus（FocusNode（））；
push（上下文，materialpage（builder:（ctx）=>Scaffold（））；
},
装饰：输入装饰(
前缀：图标（Icons.search，颜色：Colors.black），
hintText:“搜索…”，
),
),
),
)
],),
),
)

我通过使用@Mickelhrndz的答案作为基础并对其进行一点定制来解决这个问题。AppBar会产生一些问题，所以无论何时您想要创建更可自定义的内容，都不要使用AppBar。我使用了SafeArea而不是AppBar，并删除了

alignment:alignment.center

行，以便该区域从顶部开始

SafeArea(
      child: Row(
        children: <Widget>[
          Flexible(
            fit: FlexFit.tight,
            flex: 1,
            child: FittedBox(
              child: IconButton(
                  icon: Icon(Icons.account_circle, color: Colors.black) , onPressed: () => Scaffold.of(context).openDrawer()
              ),
            ),
          ),

          Flexible(
            flex: 7,
            child: Container(
              child: TextField(
                textAlignVertical: TextAlignVertical.center,
                style: TextStyle(
                ),
                onTap: () {
                  //FocusScope.of(context).requestFocus(FocusNode());
                  Navigator.push(this.context, MaterialPageRoute(builder: (context) => Search()));

                },
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.search, color: Colors.black),
                  hintText: "Search...",
                ),
              ),
            ),
          )

        ],
      ),
    );

安全区(
孩子：排(
儿童：[
灵活的(
适合：FlexFit.tight，
弹性：1，
孩子：FittedBox(
孩子：我的钮扣(
图标：图标（Icons.account\u circle，颜色：Colors.black），按下时：（）=>Scaffold.of（context.openDrawer（））
),
),
),
灵活的(
弹性：7，
子：容器(
孩子：TextField(
textAlignVertical:textAlignVertical.center，
样式：TextStyle(
),
onTap:（）{
//FocusScope.of（context.requestFocus（FocusNode（））；
Navigator.push（this.context，MaterialPageRoute（builder:（context）=>Search（））；
},
装饰：输入装饰(
前缀：图标（Icons.search，颜色：Colors.black），
hintText:“搜索…”，
),
),
),
)
],
),
);

其结果是：

---

标题仍然与应用程序栏的高度不匹配。你是说字体大小吗？是的，但我当然知道如何更改字体大小。请完整地解决这个问题。因为这对我来说很难。你在帖子里没有提到字体风格，这就是我为什么要问的原因。我想出了这个，它不是很干净，但效果很好：

Text（“应用程序名”，textScaleFactor:7*（（MediaQuery.of（context.size.height*MediaQuery.of（context.devicePixelRatio）/1920））

很抱歉误解，但我在最后一句提到了它。谢谢，我现在正在尝试。它看起来真的很好，但是在搜索栏和应用程序栏的底部之间有一个间隙。我怎样才能让它出现？

SafeArea(
      child: Row(
        children: <Widget>[
          Flexible(
            fit: FlexFit.tight,
            flex: 1,
            child: FittedBox(
              child: IconButton(
                  icon: Icon(Icons.account_circle, color: Colors.black) , onPressed: () => Scaffold.of(context).openDrawer()
              ),
            ),
          ),

          Flexible(
            flex: 7,
            child: Container(
              child: TextField(
                textAlignVertical: TextAlignVertical.center,
                style: TextStyle(
                ),
                onTap: () {
                  //FocusScope.of(context).requestFocus(FocusNode());
                  Navigator.push(this.context, MaterialPageRoute(builder: (context) => Search()));

                },
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.search, color: Colors.black),
                  hintText: "Search...",
                ),
              ),
            ),
          )

        ],
      ),
    );