如何在不设置容器高度的情况下将图标放置在按钮右下角

Question

如何将

icon

放置在包裹

Container

的

button

的右下角，而不将 height

 设置为 

Container

？

我正在尝试使用

Stack

，但没有成功。正如许多答案中所建议的那样，我无法将 

height

 设置为 

Container

，因为然后，根据文本的大小，它会被截断（并且我需要显示整个文本（这是一个选择）问答应用程序））。请参阅下面的代码片段并打印，看看在这种情况下会发生什么：

1）设置容器的高度（不起作用）：

Icon

 转到右下角，但文本被截断：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
  });

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget choiceSelectedButton = Container(
    height: 50,
    width: 100,
    child: Stack(
      children: [
        Align(
          child: OutlinedButton(
              onPressed: () {},
              child: Text('test test test test test test test test')),
        ),
        Align(
          alignment: Alignment.bottomRight,
          child: Icon(
            Icons.check_circle,
            color: Colors.green,
            size: 30,
          ),
        ),
      ],
    ),
  );

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(child: choiceSelectedButton),
    );
  }
}

然后我尝试删除高度并尝试将

Container

 和 

Icon

 包裹在 Expanded、Flexible、FittedBox 中（即使它没有意义）：

2）从容器中删除高度属性（不起作用）：

现在，文本不会被截断，但图标偏离位置：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
  });

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget choiceSelectedButton = Container(
    width: 100,
    child: Stack(
      children: [
        Align(
          child: OutlinedButton(
              onPressed: () {},
              child: Text('test test test test test test test test')),
        ),
        Align(
          alignment: Alignment.bottomRight,
          child: Icon(
            Icons.check_circle,
            color: Colors.green,
            size: 30,
          ),
        ),
      ],
    ),
  );

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(child: choiceSelectedButton),
    );
  }
}

我怎样才能做到这一点？

搜索问题：

如何在flutter中将图标放在容器的右下边缘

右下角图标颤动

将图标放置在容器的右下角

（但解决办法是设置高度）

颤动位置按钮底部非常右侧？ （spacer() 不起作用）

颤动容器位于右下角 alignment

属性不起作用

如何在 FLUTTER 中将图标/按钮放置在容器的右上角？

根本不起作用

右下角图标颤动 （但解决方案是不设置高度，因此出现问题2）

Answer 1

首先，让我们检查一下为什么您最初的方法不起作用。

1。在容器上设置固定高度 这限制了按钮的高度，如果超过容器的设置高度，则会导致文本被截断。

2。删除容器的高度 当您移除高度限制时，
Stack

 会扩展以垂直填充所有可用空间（本质上是 

double.infinity

），这使得图标位置不可预测，因为 

Stack

 没有定义的边界。

现在有两种替代解决方案，可以帮助正确定位图标，而无需设置固定高度。

第一个解决方案：

Stack(
  children: [
    SizedBox(
      width: 100, // Set the width of the button here
      child: OutlinedButton(
        onPressed: () {},
        child: const Text('test test test test test test test test'),
      ),
    ),
    const Positioned.fill(
      child: Align(
        alignment: Alignment.bottomRight, // Aligns the icon to the bottom-right of the button
        child: Icon(
          Icons.check_circle,
          color: Colors.green,
          size: 30,
        ),
      ),
    ),
  ],
)

通过删除外部

Container

 并直接使用 

SizedBox

 设置按钮的宽度，我们允许 

Stack

 仅占用必要的空间。 

Positioned.fill

 调整 

Icon

 的约束以匹配 

Stack

（按钮）内最大的子项，确保其在右下角正确对齐。

第二种解决方案：

Stack(
  alignment: Alignment.bottomRight, // Sets default alignment for all Stack children
  children: [
    SizedBox(
      width: 100, // Set the width of the button here
      child: OutlinedButton(
        onPressed: () {},
        child: const Text('test test test test test test test test'),
      ),
    ),
    const Icon(
      Icons.check_circle,
      color: Colors.green,
      size: 30,
    ),
  ],
)

通过在

alignment: Alignment.bottomRight

 上设置 

Stack

，我们会自动将图标对齐到 

Stack

 的右下角，通过删除 

Align

 小部件来简化代码。