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

Question

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

请看所附图片。

代码：

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，但它会缩小可点击区域，该区域的大小已膨胀，可以轻松点击它。是否有一种简单的方法可以完全像“右上”文本小部件一样呈现它，并且仍然具有相同的可触摸区域？在这种情况下，可触摸区域应进一步扩展到16px填充之外，因为我会将墨水链接到最终将分布在按钮周围。

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

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

感谢您的反馈。

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