You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter如何根据文本内容动态统一所有按钮高度?

问题描述

我是Flutter新手,现有如下Flutter代码:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Expanded Buttons'),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Row(
              children: [
                ExpandedButton(text: 'Button 1'),
                ExpandedButton(text: 'Button 2'),
              ],
            ),
            Row(
              children: [
                ExpandedButton(
                    text: 'Button 3' +
                        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum eros ac ante consectetur convallis. Nullam malesuada, lorem sed consectetur scelerisque, lectus velit convallis ex, id molestie lectus lorem at nisi. Sed id risus et nisi lacinia eleifend. Maecenas fermentum nec purus ac consequat. Vestibulum posuere,'),
                ExpandedButton(text: 'Button 4'),
              ],
            ),
            Row(
              children: [
                ExpandedButton(text: 'Button 5'),
                ExpandedButton(text: 'Button 6'),
              ],
            ),
            Row(
              children: [
                ExpandedButton(text: 'Button 7'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class ExpandedButton extends StatelessWidget {
  final String text;

  const ExpandedButton({Key? key, required this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Padding(
        padding: const EdgeInsets.all(10.0),
        child: ElevatedButton(
          onPressed: () {
            // Add your onPressed logic here
          },
          child: Padding(padding: EdgeInsets.all(10.0), child: Text(text)),
        ),
      ),
    );
  }
}

代码中Button 3因文本内容较多,高度与其他按钮存在差异。希望无需设置固定高度,让所有按钮自动适配最高按钮的高度,且能随内容变化动态调整,最终实现所有按钮高度统一的效果。

解决方案

使用IntrinsicHeight包裹每一行的Row组件,它会自动计算该行内子元素的最大高度,并让所有子元素继承这个高度,从而实现按钮高度统一的需求。

修改后的完整代码如下:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Expanded Buttons'),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            IntrinsicHeight(
              child: Row(
                children: [
                  ExpandedButton(text: 'Button 1'),
                  ExpandedButton(text: 'Button 2'),
                ],
              ),
            ),
            IntrinsicHeight(
              child: Row(
                children: [
                  ExpandedButton(
                      text: 'Button 3' +
                          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum eros ac ante consectetur convallis. Nullam malesuada, lorem sed consectetur scelerisque, lectus velit convallis ex, id molestie lectus lorem at nisi. Sed id risus et nisi lacinia eleifend. Maecenas fermentum nec purus ac consequat. Vestibulum posuere,'),
                  ExpandedButton(text: 'Button 4'),
                ],
              ),
            ),
            IntrinsicHeight(
              child: Row(
                children: [
                  ExpandedButton(text: 'Button 5'),
                  ExpandedButton(text: 'Button 6'),
                ],
              ),
            ),
            IntrinsicHeight(
              child: Row(
                children: [
                  ExpandedButton(text: 'Button 7'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class ExpandedButton extends StatelessWidget {
  final String text;

  const ExpandedButton({Key? key, required this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Padding(
        padding: const EdgeInsets.all(10.0),
        child: ElevatedButton(
          onPressed: () {
            // Add your onPressed logic here
          },
          child: Padding(padding: EdgeInsets.all(10.0), child: Text(text)),
        ),
      ),
    );
  }
}
说明
  • IntrinsicHeight会自动计算子组件的最大高度,让该行内所有按钮同步这个高度,无需手动设置固定值
  • 当按钮内容动态变化时,高度会自动重新计算并适配,保持所有按钮高度一致

内容的提问来源于stack exchange,提问作者Namilakonda Rahul

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.24 03:28:12