Flutter

Question

我想创建一个响应式应用栏，而无需 setState 整个脚手架发生变化时。问题是我可以将 BottomNavigationBar 小部件设置为脚手架的 bottomNavigationBar，但我不能将 AppBar 设置为 appBar。我得到这个错误

The argument type 'TopBar' can't be assigned to the parameter type 'PreferredSizeWidget'

我只用 State 部分简化了代码。

class StateLayoutNav extends State<LayoutNav>{

    @override
    Widget build(BuildContext context) => Scaffold(
        bottomNavigationBar : BottomBar(), appBar : TopBar()
    );
}

class StateTopBar extends State<TopBar>{

    @override
    Widget build(BuildContext context) => AppBar();
}

class StateBottomBar extends State<BottomBar>{

    @override
    Widget build(BuildContext context) => BottomNavigationBar();
}

Answer 1

尝试appBar: TopBar() as PreferredSizeWidget

Answer 2

我的解决方案是使用 PreferredSizeWidget 实现您的 Appbar 小部件，因为 Appbar 需要是 preferredSize

class TopBar extends StatefulWidget with PreferredSizeWidget {
    TopBar({Key key}) : preferredSize = Size.fromHeight(kToolbarHeight), super(key: key);

    @override
    final Size preferredSize; 

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

class StateTopBar extends State<TopBar>{

    @override
    Widget build(BuildContext context) => AppBar();
}

Answer 3

试试这个。它将为您提供带有任何可自定义小部件的自定义应用程序栏。您可以添加固定容器。解决方案是使用 PreferredSizeWidget 实现应用栏。

    class TopBar extends StatefulWidget implements PreferredSizeWidget {
    TopBar({Key? key}) : preferredSize = Size.fromHeight(kToolbarHeight), super(key: key);

    @override
    final Size preferredSize; // default is 56.0

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

class _TopBarState extends State<TopBar>{

    @override
    Widget build(BuildContext context) {
        return Container( child: Text("Sample App Bar") );
    }
}

Flutter - 无法将应用栏设置为脚手架的小部件

Flutter - Cannot set an appbar as a widget to the scaffold

android

dart