Button 颤振：将按钮边对边对齐到其他组件

我发现很难将按钮的视觉表现与其他小部件协调起来，但它们的可触摸区域为用户的手指留出了额外的空间

请看附件中的图片

代码：

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
主页：材料（子：主页（）），
);
}
}
类主页扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（），
正文：专栏(
儿童：[
容器(
颜色：颜色，黄色，
填充：边缘设置。全部（16），
子：列(
儿童：[
划船(
儿童：[
文本（“左上角”），
垫片（），
文本（“右上角”）
],
),
划船(
儿童：[
文本（“左中”），
垫片（），
文本（'右中'）
],
),
划船(
儿童：[
文本（“左下角”），
垫片（），
文本（“右下角”）
],
),
],
),
),
容器(
颜色：颜色。橙色，
填充：边缘设置。全部（16），
子：列(
儿童：[
划船(
儿童：[
文本（“左上角”），
垫片（），
扁平按钮(
子项：文本（“右上角”），
按下：（）{}，
)
],
),
划船(
儿童：[
文本（“左中”），
垫片（），
文本（'右中'）
],
),
划船(
儿童：[
图标按钮(
图标：图标（Icons.print），
按下：（）{}，
对齐：对齐。左下角，
),
垫片（），
文本（“右下角”）
],
),
],
),
),
],
),
);
}
}

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

平面按钮的字体与文本相同。但它的可触及范围正在扩大。我知道

materialTaptTargetSize

但它缩小了可点击区域，该区域的大小已膨胀，便于点击。有没有一种简单的方法可以将其完全渲染为“右上角”文本小部件，并且仍然具有相同的可触摸区域？在这种情况下，可触摸区域应该从16px的填充中进一步扩展，因为我会将墨水链接到按钮周围

IconButton高于文本，但问题是它不从文本开始的位置开始（左边缘）。即使我添加了

对齐：alignment.centerLeft

，它也会稍微向左移动，但仍然不会与其他文本边对边。最重要的是，在改变这种排列方式后，它不再位于墨水池的中心

现在，我使用堆栈和定位小部件解决所有这些问题。通过这种方法，我可以精确地控制项目的位置，墨水池将内容精确地放在中心。但我认为这不是一个正确的解决方案

感谢您的反馈。

试试这段代码

对于扁平按钮：

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,
),

图标按钮：

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,
),

试试这个代码

对于扁平按钮：

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,
),

图标按钮：

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,
),

---

我在我的原始帖子中提到，我已经知道其中的一些技巧。平面按钮看起来更好，但仍然垂直扩展内容，其可点击区域变小（更难点击）。选择图标按钮时，图标按钮非常偏离中心。我将结果附加到这里（两个按钮的组合图像高亮显示，我还使用了MaterialTargetSize.shrinkWrap）。使用容器，在该容器内，设置该子对象的高度和宽度。这会有用的。我在我的原始帖子中提到，我已经知道其中的一些窍门了。平面按钮看起来更好，但仍然垂直扩展内容，其可点击区域变小（更难点击）。选择图标按钮时，图标按钮非常偏离中心。我将结果附加到这里（两个按钮的组合图像高亮显示，我还使用了MaterialTargetSize.shrinkWrap）。使用容器，在该容器内，设置该子对象的高度和宽度。会有用的。