如何更改 Flutter TextButton 的高度？

Posted 2023-02-23

【中文标题】如何更改 Flutter TextButton 的高度？

【英文标题】：How to change the Flutter TextButton height?

【发布时间】：2021-06-28 05:37:16

【问题描述】：

这是输出：

我尝试制作一个应用程序，但是当我使用TextButton 时，我得到了两个按钮之间的空间 我需要一个一个没有空格 如果我使用 Expanded 小部件，ScrollChildView 不起作用 我尝试了，但我无法清除这些东西。 我尝试制作这种类型的TextButton。

有人知道或对此有任何想法吗？

    import "package:flutter/material.dart";
    import 'package:audioplayers/audio_cache.dart';

    class Account extends StatefulWidget 
    Account(Key key) : super(key: key);

    @override
    _AccountState createState() => _AccountState();
    

    class _AccountState extends State<Account> 
    @override
    Widget build(BuildContext context) 
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Stack(
            children: [
              Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    TextButton(
                      child: Container(
                        child: Text(
                          'One',
                          style: TextStyle(color: Colors.white, fontSize: 10),
                        ),
                      ),
                      style: ButtonStyle(
                        backgroundColor:
                            MaterialStateProperty.all<Color>(Colors.red),
                      ),
                      onPressed: () 
                        final player = AudioCache();
                        player.play('note1.wav');
                      ,
                    ),
                    SizedBox(
                      height: 1,
                    ),
                    TextButton(
                      child: Container(
                        child: Text(
                          'Two',
                          style: TextStyle(color: Colors.white, fontSize: 10),
                        ),
                      ),
                      style: ButtonStyle(
                        backgroundColor:
                            MaterialStateProperty.all<Color>(Colors.green),
                      ),
                      onPressed: () 
                        final player = AudioCache();
                        player.play('note2.wav');
                      ,
                    ),
                    TextButton(
                      child: Container(
                        child: Text(
                          'Three',
                          style: TextStyle(color: Colors.white, fontSize: 10),
                        ),
                      ),
                      style: ButtonStyle(
                        backgroundColor:
                            MaterialStateProperty.all<Color>(Colors.blue),
                      ),
                      onPressed: () 
                        final player = AudioCache();
                        player.play('note3.wav');
                      ,
                    ),
                    TextButton(
                      child: Container(
                        child: Text(
                          'Four',
                          style: TextStyle(color: Colors.white, fontSize: 10),
                        ),
                      ),
                      style: ButtonStyle(
                        backgroundColor:
                            MaterialStateProperty.all<Color>(Colors.grey),
                      ),
                      onPressed: () 
                        final player = AudioCache();
                        player.play('note4.wav');
                      ,
                    ),
                    TextButton(
                      child: Container(
                        child: Text(
                          'Five',
                          style: TextStyle(color: Colors.white, fontSize: 10),
                        ),
                      ),
                      style: ButtonStyle(
                        backgroundColor:
                            MaterialStateProperty.all<Color>(Colors.purple),
                      ),
                      onPressed: () 
                        final player = AudioCache();
                        player.play('note5.wav');
                      ,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
    

     

【参考方案1】：

您只需用SizedBox 包裹您的文本按钮，并按如下方式设置高度和宽度：

SizedBox(
  height: 30,
  width: 150,
  child: TextButton(...),
)

【参考方案2】：

可用高度：

SizedBox(
  height: double.infinity, // <-- match_parent
  child: TextButton(...)
)

具体高度：

SizedBox(
  height: 100, // <-- Your height
  child: TextButton(...)
)

【参考方案3】：

使用以下甚至添加您喜欢的尺寸

N/B：子大小的框是 Padding 小部件内的主要子小部件

Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.all(30.0),
                      child: SizedBox(
                        height: 60,
                        width: 200,
                        child: ElevatedButton.icon(
                          onPressed: () 
                            Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) => RegistrationMenu()));
                          ,
                          style: ButtonStyle(
                            backgroundColor:
                                MaterialStateProperty.all(Colors.red.shade800),
                          ),
                          icon: Icon(Icons.person_add_alt_1_rounded, size: 18),
                          label: Text("Register Users"),
                        ),
                      ),
                    ),
                  ],
                ),

【讨论】：

非常感谢，SizedBox 对我来说很好用。它节省了我的时间...

【参考方案4】：

在Flutter 2.0中，你可以通过更改ButtonStyle.fizedSize直接设置TextButton的高度，而不依赖于其他小部件：

TextButton(
  child: Text('Text Button'),
  style: TextButton.styleFrom(fixedSize: Size.fromHeight(150)),
),

如果要修改所有TextButtons，请将其放在ThemeData中，如下所示：

return MaterialApp(
  theme: ThemeData(
    textButtonTheme: TextButtonThemeData(
      style: TextButton.styleFrom(fixedSize: Size.fromHeight(150)),
    ),
  ),

Live Demo

【参考方案5】：

另一种解决方案是使用ConstrainedBox 包装并使用minWidth 和minHeight

属性。

---

ConstrainedBox(
  constraints:BoxConstraints(
    minHeight:80,
    minWidth:200
    ),
  child:TextButton(..)
)