Flutter在行中向右对齐IconButton

wvyml7n5 于 2023-03-09 发布在 Flutter

关注(0)|答案(2)|浏览(222)

- 这是我的代码;**

SizedBox(
        width: size.width,
        child: Row(
          children: [
            Padding(
              padding: const EdgeInsets.only(left: 10, bottom: 10, top: 10),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(100),
                child: Image.asset(
                  'assets/images/me.png',
                  height: 30,
                  width: 30,
                  fit: BoxFit.cover,
                ),
              ),
            ),
            const Padding(
              padding: EdgeInsets.only(left: 10),
              child: Text(
                'samet',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 16),
              ),
            ),
            IconButton(
              // padding: const EdgeInsets.only(left: 250),
              onPressed: () {},
              icon: const Icon(Icons.more_horiz),
              iconSize: 30,
              alignment: Alignment.centerRight,
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent,
            )
          ],
        ),
      ),

- 此处为输出;**

我看了其他的StackOverflow问题，也没有找到答案。而且我不能用onPressed函数改变我的iconButton的颜色。我创建了Color_color变量，并使我的iconButton属性color =_color，在onPressed中我打开了setState函数，当我按下时它不会改变。

IconButton(
              // padding: const EdgeInsets.only(left: 250),
              color: _iconColor,
              onPressed: () {
                setState(() {
                  _iconColor = Colors.red;
                });
              },
              icon: const Icon(Icons.more_horiz),
              iconSize: 30,
              alignment: Alignment.centerRight,
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent,
            )

flutter

来源：https://stackoverflow.com/questions/75634638/flutter-align-iconbutton-to-the-right-in-row

2条答案

按热度按时间

lf3rwulv1#

如何右对齐图标按钮

您可以使用Expanded来占用它们之间的额外空间。

const Padding(
              padding: EdgeInsets.only(left: 10),
              child: Text(
                'samet',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 16),
              ),
            ),
            Expanded(child: Container()),
            IconButton(
              // padding: const EdgeInsets.only(left: 250),
              onPressed: () {},
              icon: const Icon(Icons.more_horiz),
              iconSize: 30,
              alignment: Alignment.centerRight,
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent,
            ),
            
          ],

赞(0）回复(0）举报 2023-03-09

5t7ly7z52#

只需将IconButton封装到Expanded中，然后
要更改IconButton的color，请使用IconButton的color属性。
输出：

代码：

Scaffold(
        body: Row(
          children: [
            Padding(
              padding: const EdgeInsets.only(left: 10, bottom: 10, top: 10),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(100),
                child: Image.asset(
                  'assets/images/avatars/boy.png',
                  height: 30,
                  width: 30,
                  fit: BoxFit.cover,
                ),
              ),
            ),
            const Padding(
              padding: EdgeInsets.only(left: 10),
              child: Text(
                'samet',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 16),
              ),
            ),
            Expanded(
              child: IconButton(
                // padding: const EdgeInsets.only(left: 250),
                onPressed: () {},
                icon: const Icon(Icons.more_horiz),
                iconSize: 30,
                alignment: Alignment.centerRight,
                color: Colors.red,
              ),
            ),
          ],
        ),
      ),

赞(0）回复(0）举报 2023-03-09

我来回答

Flutter在行中向右对齐IconButton

2条答案

如何右对齐图标按钮

相关问题

热门标签

最新问答