【问题标题】:How to centered AppBar content in flutter web如何在 Flutter Web 中居中 AppBar 内容
【发布时间】:2020-11-26 10:09:22
【问题描述】:

我试图将整个 appBar 内容集中在 Flutter Web 中,就像 appBar 下方的占位符一样。我想让应用栏如下图所示

这是我的小部件状态的代码

class _LoginState extends State<Login> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: false,
        titleSpacing: 0.0,
        title: const Text(
          'Title',
        ),
        automaticallyImplyLeading: true,
        leading: IconButton(
            icon: Icon(Icons.arrow_back_ios),
            onPressed: () {
              Navigator.pop(
                  context,
                  MaterialPageRoute(
                      builder: (BuildContext context) => Intro()));
            }),
        backgroundColor: Theme.of(context).primaryColor,
      ),
      backgroundColor: Theme.of(context).canvasColor,
      body: Center(
        child: AspectRatio(
          aspectRatio: 9 / 16,
          child: Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: Placeholder(),
          ),
        ),
      ),
    );
  }
}

【问题讨论】:

  • 你试过centerTitle: true 吗?
  • 是的,但它只是在标题的中心,对吗?不是全部内容
  • 用中心小部件包裹你的图标按钮

标签: flutter flutter-web


【解决方案1】:

尝试自定义应用栏

AppBar(
    centerTitle: true,
    titleSpacing: 0.0,
    title: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        IconButton(icon: Icon(Icons.arrow_back_ios), onPressed: () {}),
        const Text('Title'),
      ],
    ),
    backgroundColor: Theme.of(context).primaryColor,
  ),

【讨论】:

    猜你喜欢
    • 2019-01-23
    • 2020-10-19
    • 2021-08-26
    • 1970-01-01
    • 2020-05-16
    • 2021-09-04
    • 2021-06-11
    • 2021-11-26
    • 2023-01-19
    相关资源
    最近更新 更多