如何将 定位到icon
的右下方Container
以包裹button
,而无需将设置height
为Container
?
我尝试使用Stack
,但没有成功。正如许多答案所建议的那样,我无法将 a 设置height
为 the 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()不起作用)
Flutter 容器定位右下角
alignment
属性不起作用
根本不起作用
右下角的图标颤动 (但解决方案是不设置高度,因此出现问题 2)
首先,让我们分析一下为什么您最初的方法没有奏效。
1. 在容器上设置固定高度
这会限制按钮的高度,如果文本超出容器的设置高度,则会导致文本被截断。
2. 从容器中移除高度
当您移除高度限制时,会
Stack
扩展以垂直填充所有可用空间(本质上double.infinity
),这会使图标定位变得不可预测,因为Stack
没有定义的边界。现在,这里有两种替代解决方案,可以帮助正确定位图标而无需设置固定高度。
第一个解决方案:
通过移除外部
Container
并直接用 设置按钮的宽度SizedBox
,我们允许Stack
仅占用必要的空间。Positioned.fill
调整Icon
的约束以匹配 (按钮)内最大的子项Stack
,确保它在右下角正确对齐。第二种解决方案:
通过
alignment: Alignment.bottomRight
在 上进行设置Stack
,我们会自动将图标对齐到 的右下角Stack
,通过移除小部件来简化代码Align
。为了更好地理解约束,我强烈建议您在 Flutter 文档中探索这篇文章。