如何将
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),
);
}
}
我怎样才能做到这一点?搜索问题:
(但解决办法是设置高度)
属性不起作用
根本不起作用
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
小部件来简化代码。