Kum*_*kie 9 flutter flutter-layout
这是输出:
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');
},
),
],
),
),
],
),
),
),
);
}
}
Run Code Online (Sandbox Code Playgroud)
Jah*_*lam 12
您只需用 包裹文本按钮SizedBox并按如下方式设置高度和宽度:
SizedBox(
height: 30,
width: 150,
child: TextButton(...),
)
Run Code Online (Sandbox Code Playgroud)
Nea*_*arl 11
在 Flutter 2.0 中,您可以直接设置 的高度TextButton,而不依赖于其他 widget,只需更改ButtonStyle.fixedSize:
TextButton(
child: Text('Text Button'),
style: TextButton.styleFrom(fixedSize: Size.fromHeight(150)),
),
Run Code Online (Sandbox Code Playgroud)
如果要修改所有的TextButtons,则如下所示ThemeData:
return MaterialApp(
theme: ThemeData(
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(fixedSize: Size.fromHeight(150)),
),
),
Run Code Online (Sandbox Code Playgroud)
这可能不会直接回答您的问题,但 aTextButton是一个常规小部件,其width和height可以通过将其包装在SizedBox提供严格约束的a 中进行设置。从这里
match_parent (全屏宽度):
SizedBox(
width: double.infinity, // <-- match_parent
child: TextButton(...)
)
Run Code Online (Sandbox Code Playgroud)
具体宽度:
SizedBox(
width: 100, // <-- Your width
child: TextButton(...)
)
Run Code Online (Sandbox Code Playgroud)
使用以下内容甚至添加您喜欢的尺寸
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"),
),
),
),
],
),
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
6855 次 |
| 最近记录: |