Question

我正在尝试在搜索栏中实现自定义高度。我尝试了以下代码：

class SearchBoxWidget extends StatelessWidget implements PreferredSizeWidget  {

  @override
  Widget build(BuildContext context) {
    return PreferredSize(
      preferredSize: Size.fromHeight(AppSize.s80),
      child: AppBar(
        backgroundColor: Colors.white,
        leading: new IconButton(
          iconSize: AppSize.large,
          icon: new Icon(
            Icons.search,
          ),
          color: Colors.black,
          tooltip: 'Search',
          onPressed: () {
            print('Pressed Menu');
          },
        ),
        title: TextField(
          autofocus: false,
          cursorColor: AppTheme.colors.themeGreen,
          decoration: InputDecoration(
            hintText: Constants.searchPlaceHolder,
            hintStyle: AppTheme.textStyle.searchPlaceholder,
            focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide.none//BorderSide(color: Colors.grey),
            ),
            enabledBorder:UnderlineInputBorder(
                borderSide: BorderSide.none//new BorderSide(color: Colors.red)
            ),
          ),
        ),
      ),
    );
  }
  @override
  Size get preferredSize => new Size.fromHeight(kToolbarHeight);
}

但这导致我的身高与默认屏幕截图相同。

但是我要实现以下设计：

Answer 1

先决条件

请注意，这是Flutter SDK中的未解决问题。 AppBar 的高度不能设置为大于56dp。

Github问题：

建议

试玩flexibleSpace的{{1}}属性，您可以在其中绘制自定义AppBar，它可以满足或接近您的要求，但是仍然...

Widget

此小部件堆叠在工具栏和选项卡栏的后面。它的高度会与应用栏的整体高度相同。

此外

订阅Github上有关flexibleSpace的高度限制的问题。

Answer 2

使用首选尺寸设置所需的尺寸。

SimpleDateFormat dateFormat = ..//
String formattedString = dateFormat.format(date); //..

搜索栏自定义高度

2 个答案: