將IconButton緊貼螢屏邊緣-有解無憂

我有一個自定義PreferredSize小部件，它用作應用程式欄，我希望將最右邊的操作按鈕的邊緣與右側對齊，就像它被其邊界框裁剪一樣。知道我有這個：

將 IconButton 緊貼螢屏邊緣

我想要實作的基本上是這樣的（注意三個點的位置）：

將 IconButton 緊貼螢屏邊緣

我的代碼如下所示：

class MaterialIconButton extends StatelessWidget {
  final Icon icon;

  const MaterialIconButton({
    Key? key,
    required this.icon
  }): super(key: key);

  @override
  Widget build(BuildContext context) {
    return  ClipOval(
      child: 
      Material(
        color: Colors.transparent,
        child: Padding(
          padding: const EdgeInsets.all(0),
          child: IconButton(
            onPressed: () {}, 
            icon: icon,
            iconSize: 36,
            padding: EdgeInsets.zero,
            splashColor: Colors.black.withAlpha(40),
            highlightColor: Colors.black.withAlpha(20),
          )
        ),
      ),
    );
  }
}

class HomeHeader extends StatelessWidget {
  const HomeHeader({Key? key}): super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.indigo[100]
      ),
      padding: const EdgeInsets.fromLTRB(16, 32, 16, 16),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          RichText(
            text: TextSpan(
              children: [
                TextSpan(
                  text: "Example",
                  style: TextStyle(
                    fontWeight: FontWeight.w600,
                    fontSize: 20,
                    color: Colors.blueGrey[800]
                  )
                ),
              ]    
            )
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: const [
              MaterialIconButton(
                icon: Icon(
                  Icons.settings
                )
              ),
              MaterialIconButton(
                icon: Icon(
                  Icons.more_vert
                )
              )
            ],
          )
        ]
      )
    );
  }
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const PreferredSize(
        child: HomeHeader(),
        preferredSize: Size.fromHeight(120),
      ),
      body: (...)
    );
  }
}

有沒有辦法只使用內置的 Flutter SVG 圖示來實作這一點？請注意，通常我無法提前知道圖示邊界框的確切大小。

uj5u.com熱心網友回復：

嘗試使用 overflowBox 或使用此包將 IconButton 緊貼螢屏邊緣

在通過 0 之前 fromLTRB(16, 32, 16, 16),

將 IconButton 緊貼螢屏邊緣

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/338148.html

標籤：扑镖颤振布局

上一篇：我可以更改有狀態小部件的語言環境嗎？

下一篇：廢話|螢屏變成黑色背景