📜  颤动如何将按钮均匀地排成一排 - Dart (1)

📅  最后修改于: 2023-12-03 15:42:29.005000             🧑  作者: Mango

在Dart中如何将按钮均匀地排成一排

在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中以水平排列。我们可以使用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: () {},
              ),
            ],
          ),
        ),
      ),
    );
  }
}

以上代码将创建一个包含三个按钮的行,并且它们将均匀排列。