如何布局一列按钮,其宽度等于 Flutter 中最宽的按钮的宽度?

如何使以下按钮的宽度与最宽的按钮(在本例中为最后一个)相同?我不想硬编码使所有按钮都等于最后一个,因为例如,当切换到不同的语言时,它可能不是最宽的最后一个按钮。

如何布局一列按钮,其宽度等于 Flutter 中最宽的按钮的宽度?

我使用的代码:

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),Row(
          mainAxisSize: MainAxisSize.max,children: [
            Expanded(child: 
              Column(
                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),);
}

谢谢!

gengwenshuang 回答:如何布局一列按钮,其宽度等于 Flutter 中最宽的按钮的宽度?

首先,您不需要用于 Row 小部件的 ExpandedColumn 小部件,因为它们毫无意义。

现在,可以通过使用 Column 小部件包装 IntrinsicWidth 小部件并设置 Column(property: crossAxisAlignment: CrossAxisAlignment.stretch 来实现您想要的。

enter image description here

完整的代码应该是:

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

大家都在问