首先,您不需要用于 Row
小部件的 Expanded
和 Column
小部件,因为它们毫无意义。
现在,可以通过使用 Column
小部件包装 IntrinsicWidth
小部件并设置 Column(property: crossAxisAlignment: CrossAxisAlignment.stretch
来实现您想要的。
完整的代码应该是:
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
children: [
Spacer(flex: 1),Text(
'Flutter Test',style: Theme.of(context).textTheme.headline1,),Spacer(flex: 2),IntrinsicWidth(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,children: [
ElevatedButton(
onPressed: () {},child: Text('Apple'),ElevatedButton(
onPressed: () {},child: Text('Banana'),child: Text('Chery'),child: Text('Durian'),ElevatedButton(
onPressed: () {
Navigator.pop(context);
},child: Text('Emu apple fruit'),])),Spacer(flex: 3),],);
}
,
由于 ElevatedButton
会根据 Text
小部件传递的子字符串的长度更改其宽度,因此您可以在 SizedBox
小部件中包含与所有相同宽度的提升按钮“sizedboxes”使所有按钮的宽度相同。
SizedBox(width: 200,child: ElevatedButton(child: Text('Apple'),onPressed: () {})),SizedBox(width: 200,child: ElevatedButton(child: Text('Orange'),child: ElevatedButton(child: Text('Emu Apple fruit'),onPressed: () {}))
您可以将宽度选择为您希望将宽度设置为的任何数字。
,
尝试layoutBuilder
,它检测父窗口小部件的大小并提供子窗口可以使用的constraints
。
希望您知道最大宽度并可以使用 constrains
设置宽度
这有帮助吗?
import 'package:flutter/material.dart';
class MaxWidthButton extends StatelessWidget {
const MaxWidthButton({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (context,constraints) => Center(
child: Column(
children: [
Spacer(flex: 1),Text(
'Flutter Test',Row(
mainAxisSize: MainAxisSize.max,children: [
Expanded(
child: Column(
children: [
ConstrainedBox(
constraints: BoxConstraints(
minWidth: constraints.maxWidth,child: ElevatedButton(
onPressed: () {},GestureDetector(
onTap: () {},child: Container(
color: Colors.cyanAccent,alignment: Alignment.center,width: constraints.maxWidth *.6,ElevatedButton(
onPressed: () {},child: Container(
alignment: Alignment.center,ElevatedButton(
onPressed: () {
Navigator.pop(context);
},);
}
}
,
Widget build(BuildContext context) {
double buttonWidth =100.0;
double buttonHeight =20.0;
return Scaffold(
body: Center(
child: Column(
children: [
Spacer(flex: 1),Row(
mainAxisSize: MainAxisSize.max,children: [
Expanded(child:
Column(
children: [
ElevatedButton(
onPressed: () {
},child: Container(
width: buttonWidth,height: buttonHeight,child: Text('Apple')
),ElevatedButton(
onPressed: () {
},child: Text('Banana')
),child: Container(
width: buttonWidth,child: Text('Cherry')
),child: Text('Durian')
),child: Text('Emu apple fruit')
),);
}
本文链接:https://www.f2er.com/76387.html