Flutter：将按钮边缘与其他组件对齐

Posted 2023-03-17

【中文标题】Flutter：将按钮边缘与其他组件对齐

【英文标题】：Flutter: aligning buttons edge to edge to other components

【发布时间】：2020-04-02 03:56:26

【问题描述】：

我发现很难以一种视觉表现与其他小部件协调的方式来布局按钮，但它们的可触摸区域为用户的手指提供了额外的额外空间。

请看附图。

代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: Material(child: HomePage()),
    );
  


class HomePage extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: <Widget>[
            Container(
            color: Colors.yellow,
            padding: EdgeInsets.all(16),
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Text('Top Left'),
                    Spacer(),
                    Text('Top right')
                  ],
                ),
                Row(
                  children: <Widget>[
                    Text('Middle Left'),
                    Spacer(),
                    Text('Middle right')
                  ],
                ),
                Row(
                  children: <Widget>[
                    Text('Bottom Left'),
                    Spacer(),
                    Text('Bottom right')
                  ],
                ),
              ],
            ),
          ),
          Container(
            color: Colors.orange,
            padding: EdgeInsets.all(16),
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Text('Top Left'),
                    Spacer(),
                    FlatButton(
                      child: Text('Top right'),
                      onPressed: () ,
                    )
                  ],
                ),
                Row(
                  children: <Widget>[
                    Text('Middle Left'),
                    Spacer(),
                    Text('Middle right')
                  ],
                ),
                Row(
                  children: <Widget>[
                    IconButton(
                      icon: Icon(Icons.print),
                      onPressed: () ,
                      alignment: Alignment.bottomLeft,
                    ),
                    Spacer(),
                    Text('Bottom right')
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  

“所有文本”小部件排列精美。但是当我添加交互式小部件时，它开始变得丑陋。

平面按钮的字体与文本相同。但它的可触摸区域正在扩大它。我知道materialTapTargetSize，但它缩小了可点击区域，该区域具有膨胀的尺寸，以便于点击它。有没有一种简单的方法可以将它完全呈现为“右上角”文本小部件并且仍然具有相同的可触摸区域？在这种情况下，可触摸区域应该进一步扩大到 16 像素的填充，因为我会将 Ink 链接到按钮周围。

IconButton 高于文本，但问题是它没有从文本开始的地方开始（左边缘）。即使我添加了alignment: Alignment.centerLeft，它也会稍微向左移动，但仍然不会与其他文本并排。最重要的是，在更改此对齐方式后，它不再位于 InkWell 的中心。

目前，我使用 Stack 和 Positioned 小部件解决了所有这些问题。通过这种方法，我可以准确控制项目的位置，并且 InkWell 将内容准确地保持在中心。但我认为这不是一个正确的解决方案。

感谢您的反馈。

【参考方案1】：

试试这个代码，

对于扁平按钮：

Container(
   alignment: Alignment.centerRight,
   width: 60,
   child: FlatButton(
     padding: EdgeInsets.all(0),
     child: Text('Top right'),
     onPressed: () ,
   ),
)

图标按钮：

IconButton(
  padding: EdgeInsets.all(0),
  icon: Icon(Icons.print),
  onPressed: () ,
  alignment: Alignment.bottomLeft,
),

【讨论】：

我在原始帖子中提到我已经知道其中的一些技巧。扁平按钮看起来更好，但仍会垂直扩展内容，并且其可点击区域变小（更难点击）。选中时，图标按钮非常偏离中心。我在此处附上结果imgur.com/a/oTKb6KW（突出显示两个按钮的组合图像，我还使用了 MaterialTapTargetSize.shrinkWrap）。

使用容器，在该容器内，设置该子项的高度和宽度。它会起作用的。