Flutter 中的圓形 AppBar，帶有后退按鈕

Question

我使用此處找到的代碼創建了一個自定義的圓形 AppBar，但中間只有一個標題。 我想在 AppBar 的左上角添加一個后退按鈕，我嘗試將一個按鈕和文本嵌套在一個行中，但結果是按鈕和文本都沒有顯示。 有什么幫助嗎？

這里的代碼：

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

// ignore: must_be_immutable
class RoundedAppBar extends StatelessWidget implements PreferredSizeWidget {
  String title;

  RoundedAppBar(this.title);
  @override
  Widget build(BuildContext context) {
    return PreferredSize(
        child: LayoutBuilder(builder: (context, constraints) {
          final width =
              constraints.maxWidth * 16; //per modificare "rotondità" app Bar
          return OverflowBox(
            maxHeight: double.infinity,
            maxWidth: double.infinity,
            child: SizedBox(
              height: width,
              width: width,
              child: Padding(
                padding: EdgeInsets.only(
                    bottom: width / 2 - preferredSize.height / 2),
                child: Container(
                    alignment: Alignment.bottomCenter,
                    padding: EdgeInsets.only(bottom: 10),
                    decoration: BoxDecoration(
                      color: const Color(0xff000350),
                      shape: BoxShape.circle,
                    ),
                    child: Row(
                      children: [
                        Align(
                          alignment: Alignment.centerLeft,
                          child: IconButton(
                            color: Colors.black,
                            icon: Icon(Icons.chevron_left),
                            onPressed: () => Navigator.pop(context),
                          ),
                        ),
                        Text(
                          title,
                          textAlign: TextAlign.center,
                          style: TextStyle(
                              fontFamily: 'Conformity',
                              color: Colors.white,
                              fontSize: 30,
                              fontWeight: FontWeight.normal),
                        ),
                      ],
                    )),
              ),
            ),
          );
        }),
        preferredSize: preferredSize);
  }

  @override
  Size get preferredSize => Size.fromHeight(80);

編輯：按照建議嘗試使用 ListTile，發生了一些事情但無法正常工作。 結果在這里。

child: ListTile(
                    title: Text(
                      title,
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          fontFamily: 'Conformity',
                          color: Colors.white,
                          fontSize: 30,
                          fontWeight: FontWeight.normal),
                    ),
                    leading: IconButton(
                      color: Colors.white,
                      icon: Icon(Icons.chevron_left),
                      onPressed: () => Navigator.pop(context),
                    ),
                  ),

編輯：我插入了你的代碼，如圖所示。 經過反復試驗，使用 35 作為高度，我能夠看到標題，但仍然沒有按鈕。

child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      _buildBack(true, context),
                      Container(
                        height: 35,
                        child: Text(
                          title,
                          textAlign: TextAlign.center,
                          style: TextStyle(
                              fontFamily: 'Conformity',
                              color: Colors.white,
                              fontSize: 30,
                              fontWeight: FontWeight.normal),
                        ),
                      ),
                      _buildBack(false, context),
                    ],

和

  Widget _buildBack(bool isPlaceHolder, BuildContext context) {
    return Visibility(
      child: InkWell(
        child: Icon(
          Icons.close,
          size: 35,
        ),
        onTap: () => Navigator.of(context, rootNavigator: true).pop('dialog'),
      ),
      maintainSize: true,
      maintainAnimation: true,
      maintainState: true,
      visible: !isPlaceHolder,
    );
  }

結果在這里

Answer 1

您可以使用ListTile並使用IconButton作為前導。

ListTile(
  
  leading: IconButton(
    icon: Icon(Icons.back),
    title: '',
    onPressed => Navigator.pop(context),
   ),
),

我看到的另一種可能性：

作為來自 AppBar 的孩子

Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              _buildBack(true, context),
              Container(
                height: height,
                child: Text(
                  '$_title',
                  style: Theme.of(context).textTheme.headline2,
                ),
              ),
              _buildBack(false, context),
            ],
          ),

在建造者之外的另一個地方。

  Widget _buildBack(bool isPlaceHolder, Buildcontext context) {
      return Visibility(
        child: InkWell(
          child: Icon(
            Icons.close,
            size: widget.height,
          ),
          onTap: () => Navigator.of(context, rootNavigator: true).pop('dialog'),
        ),
        maintainSize: true,
        maintainAnimation: true,
        maintainState: true,
        visible: !isPlaceHolder,
      );
  }}

這里又有一行你自己試過了，但是這個設置有點不同，在文本之前和之后構建了一個 iconButton，但是為了讓文本保持在中心，第二個是不可見的，