📅  最后修改于: 2023-12-03 15:42:29.005000             🧑  作者: Mango
在Dart中,我们可以使用Flutter的Widgets库来创建UI元素。要将按钮均匀地排成一排,我们可以使用Row Widget。 Row Widget的主要目的是将一组子元素水平排列。
首先,我们需要创建一组按钮。我们可以使用RaisedButton Widget来创建按钮。下面是创建按钮的代码片段。
RaisedButton(
child: Text('Button 1'),
onPressed: () {},
),
RaisedButton(
child: Text('Button 2'),
onPressed: () {},
),
RaisedButton(
child: Text('Button 3'),
onPressed: () {},
),
接下来,我们需要将这些按钮放入Row Widget中以水平排列。我们可以使用Row Widget的children属性来设置子元素。我们还可以使用Row Widget的mainAxisAlignment属性来设置子元素在主轴上的对齐方式。为了将按钮均匀分布,我们可以将mainAxisAlignment属性设置为MainAxisAlignment.spaceEvenly。下面是将按钮放入Row Widget并设置主轴对齐方式的示例代码。
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
RaisedButton(
child: Text('Button 1'),
onPressed: () {},
),
RaisedButton(
child: Text('Button 2'),
onPressed: () {},
),
RaisedButton(
child: Text('Button 3'),
onPressed: () {},
),
],
),
下面是将按钮均匀排列的完整代码。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Button Row',
home: Scaffold(
appBar: AppBar(
title: Text('Button Row'),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
RaisedButton(
child: Text('Button 1'),
onPressed: () {},
),
RaisedButton(
child: Text('Button 2'),
onPressed: () {},
),
RaisedButton(
child: Text('Button 3'),
onPressed: () {},
),
],
),
),
),
);
}
}
以上代码将创建一个包含三个按钮的行,并且它们将均匀排列。