如何在行和列中制作 6 个 RisedButton |颤动与飞镖答案

【问题标题】：how can I make 6 RisedButton in row and column | flutter & dart如何在行和列中制作 6 个 RisedButton |颤动与飞镖
【发布时间】：2021-09-15 00:29:18
【问题描述】：

颤振和飞镖

我想让我的应用看起来像这样： app

但目前我的按钮在列下方，我无法使用行和列小部件以及它们上方的文本来管理它们。

请问有人知道如何制作这样的按钮并在按钮上方写下文字吗？

我的代码：

import 'package:flutter/material.dart';

class Test extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            backgroundColor: Theme.of(context).backgroundColor,
            body: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  SizedBox(
                    width: 20,
                  ),
                  Column(
                    children: [
                      SizedBox(height: 30),
                      Container(
                        child: RaisedButton(
                          onPressed: () {},
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10.0)),
                          padding: EdgeInsets.all(0.0),
                          child: Ink(
                            decoration: BoxDecoration(
                                gradient: LinearGradient(
                                  colors: [
                                    Color.fromRGBO(34, 46, 62, 1),
                                    Color.fromRGBO(34, 46, 62, 1),
                                    // Color.fromRGBO(75, 83, 228, 1),
                                    // Color.fromRGBO(113, 90, 206, 1)
                                  ],
                                  begin: Alignment.centerLeft,
                                  end: Alignment.centerRight,
                                ),
                                borderRadius: BorderRadius.circular(5.0)),
                            child: Container(
                              constraints: BoxConstraints(
                                  maxWidth: 183.0, minHeight: 70.0),
                              alignment: Alignment.center,
                              child: Text(
                                "English",
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 17,
                                    fontFamily: 'Montserrat-Arabic',
                                    fontWeight: FontWeight.bold),
                              ),
                            ),
                          ),
                        ),
                      ),
                      SizedBox(height: 30),
                      Container(
                        child: RaisedButton(
                          onPressed: () {},
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10.0)),
                          padding: EdgeInsets.all(0.0),
                          child: Ink(
                            decoration: BoxDecoration(
                                gradient: LinearGradient(
                                  colors: [
                                    Color.fromRGBO(34, 46, 62, 1),
                                    Color.fromRGBO(34, 46, 62, 1),
                                    // Color.fromRGBO(75, 83, 228, 1),
                                    // Color.fromRGBO(113, 90, 206, 1)
                                  ],
                                  begin: Alignment.centerLeft,
                                  end: Alignment.centerRight,
                                ),
                                borderRadius: BorderRadius.circular(5.0)),
                            child: Container(
                              constraints: BoxConstraints(
                                  maxWidth: 183.0, minHeight: 70.0),
                              alignment: Alignment.center,
                              child: Text(
                                "English",
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 17,
                                    fontFamily: 'Montserrat-Arabic',
                                    fontWeight: FontWeight.bold),
                              ),
                            ),
                          ),
                        ),
                      ),
                      SizedBox(height: 30),
                      Container(
                        child: RaisedButton(
                          onPressed: () {},
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10.0)),
                          padding: EdgeInsets.all(0.0),
                          child: Ink(
                            decoration: BoxDecoration(
                                gradient: LinearGradient(
                                  colors: [
                                    Color.fromRGBO(34, 46, 62, 1),
                                    Color.fromRGBO(34, 46, 62, 1),
                                    // Color.fromRGBO(75, 83, 228, 1),
                                    // Color.fromRGBO(113, 90, 206, 1)
                                  ],
                                  begin: Alignment.centerLeft,
                                  end: Alignment.centerRight,
                                ),
                                borderRadius: BorderRadius.circular(5.0)),
                            child: Container(
                              constraints: BoxConstraints(
                                  maxWidth: 183.0, minHeight: 70.0),
                              alignment: Alignment.center,
                              child: Text(
                                "English",
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 17,
                                    fontFamily: 'Montserrat-Arabic',
                                    fontWeight: FontWeight.bold),
                              ),
                            ),
                          ),
                        ),
                      ),
                      SizedBox(height: 30),
                      Container(
                        child: RaisedButton(
                          onPressed: () {},
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10.0)),
                          padding: EdgeInsets.all(0.0),
                          child: Ink(
                            decoration: BoxDecoration(
                                gradient: LinearGradient(
                                  colors: [
                                    Color.fromRGBO(34, 46, 62, 1),
                                    Color.fromRGBO(34, 46, 62, 1),
                                    // Color.fromRGBO(75, 83, 228, 1),
                                    // Color.fromRGBO(113, 90, 206, 1)
                                  ],
                                  begin: Alignment.centerLeft,
                                  end: Alignment.centerRight,
                                ),
                                borderRadius: BorderRadius.circular(5.0)),
                            child: Container(
                              constraints: BoxConstraints(
                                  maxWidth: 183.0, minHeight: 70.0),
                              alignment: Alignment.center,
                              child: Text(
                                "English",
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 17,
                                    fontFamily: 'Montserrat-Arabic',
                                    fontWeight: FontWeight.bold),
                              ),
                            ),
                          ),
                        ),
                      ),
                      SizedBox(height: 30),
                      Container(
                        child: RaisedButton(
                          onPressed: () {},
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10.0)),
                          padding: EdgeInsets.all(0.0),
                          child: Ink(
                            decoration: BoxDecoration(
                                gradient: LinearGradient(
                                  colors: [
                                    Color.fromRGBO(34, 46, 62, 1),
                                    Color.fromRGBO(34, 46, 62, 1),
                                    // Color.fromRGBO(75, 83, 228, 1),
                                    // Color.fromRGBO(113, 90, 206, 1)
                                  ],
                                  begin: Alignment.centerLeft,
                                  end: Alignment.centerRight,
                                ),
                                borderRadius: BorderRadius.circular(5.0)),
                            child: Container(
                              constraints: BoxConstraints(
                                  maxWidth: 183.0, minHeight: 70.0),
                              alignment: Alignment.center,
                              child: Text(
                                "English",
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 17,
                                    fontFamily: 'Montserrat-Arabic',
                                    fontWeight: FontWeight.bold),
                              ),
                            ),
                          ),
                        ),
                      ),
                      SizedBox(height: 30),
                      Container(
                        child: RaisedButton(
                          onPressed: () {},
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10.0)),
                          padding: EdgeInsets.all(0.0),
                          child: Ink(
                            decoration: BoxDecoration(
                                gradient: LinearGradient(
                                  colors: [
                                    Color.fromRGBO(34, 46, 62, 1),
                                    Color.fromRGBO(34, 46, 62, 1),
                                    // Color.fromRGBO(75, 83, 228, 1),
                                    // Color.fromRGBO(113, 90, 206, 1)
                                  ],
                                  begin: Alignment.centerLeft,
                                  end: Alignment.centerRight,
                                ),
                                borderRadius: BorderRadius.circular(5.0)),
                            child: Container(
                              constraints: BoxConstraints(
                                  maxWidth: 183.0, minHeight: 70.0),
                              alignment: Alignment.center,
                              child: Text(
                                "English",
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 17,
                                    fontFamily: 'Montserrat-Arabic',
                                    fontWeight: FontWeight.bold),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  SizedBox(
                    width: 20,
                  ),
                ])));
  }
}

【问题讨论】：

标签： flutter dart

【解决方案1】：

正如上面的答案也是很好的做法，但对我来说，在颤振 I 上使用 nullsafety，通常简单地创建一个单独的小部件并调用它们，例如

    class YourWidgetwithTopText extends StatelessWidget{

           final String? textonTop;
           final Function()? function1;
           final Function()? function2;
           final String? buttonName1;
           final String? buttonName2;
           final double? height;
           final double? width;
    
     const YourWidgetwithTopText({this.textonTop,this.function1,this.function2,this.buttonName,this.buttonName2,this.heigth,this.width});

      @override
  Widget build(BuildContext context) {
      return Container(
        child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        textDirection: TextDirection.ltr,
        children: [
           Text(textonTop!),
              
           SizedBox(height: 10),
            
           Container(
          child: Row(
            children:[
            
              GestureDetector(
              onTap: function1,
                 child: Container(
                    height: height!,
                    width: width!,
                     decoration: BoxDecoration( 
                        color: Colors.accent
                       borderRadius: BorderRadius.circular(10),
                    ),
                  child: Center(
                      child: Text(buttonName1!) 
                     )
                 )
                 ),
        
                SizedBox(width:10),
              
                 GestureDetector(
              onTap: function2,
                 child: Container(
                    height: height!,
                    width: width!,
                     decoration: BoxDecoration( 
                        color: Colors.accent
                       borderRadius: BorderRadius.circular(10),
                    ),
                  child: Center(
                      child: Text(buttonName2!) 
                     )
                 )
                 ),
            ]
         )
      ),
         ]
        )
     );
    }

}

然后在创建一个包含一些信息的单独小部件之后。

class Test extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
     return SafeArea(
        child: Scaffold(
         body: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInset.only(
              left: 20 , right: 20),
               child: Column(
               children: [
              //Then call widget its should be like this.

                YourWidgetwithTopText(
                   textonTop: "Text on Top 1"
                   function1 : (){},
                   function2: (){},
                   buttonName1:"Button 1",
                   buttonName2: "Button 2",
                   height: 60,
                   width:  110
                ),
               //Put some SizeBox for spacing above or below
                YourWidgetwithTopText(
                   textonTop: "Text on Top 2"
                   function1 : (){},
                   function2: (){},
                   buttonName1:"Button 1",
                   buttonName2: "Button 2",
                   height: 60,
                   width:  110
                ),
               YourWidgetwithTopText(
                   textonTop: "Text on Top 3"
                   function1 : (){},
                   function2: (){},
                   buttonName1:"Button 1",
                   buttonName2: "Button 2",
                   height: 60,
                   width:  110
                ),
  
              ]
              )  
            ),
          )   
      ),
     );
     }
}

对于初学者，您可以尝试这样做。

【讨论】：

riasedbutton 会怎么样？
您可以将 Container 更改为 RaisedButton 或用具有高度和宽度的容器包装它，然后结果仍然相同，还可以删除 GestureDetector 。但我恳请您从 Flutter 2 开始，因为它具有 nullsafety
非常感谢！它对我有用，我可以要你的任何联系信息吗？我想问你另一件事
好的，朋友 a.chil6663@gmail.com

【解决方案2】：

您可以从here 使用GridView。

像这个例子你可以粘贴到DartPad:

import 'package:flutter/material.dart';

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

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Theme.of(context).backgroundColor,
        body: GridView.count(
          primary: false,
          padding: const EdgeInsets.all(20),
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          crossAxisCount: 2,
          children: <Widget>[
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text("He'd have you all unravel at the"),
              color: Colors.teal[100],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Heed not the rabble'),
              color: Colors.teal[200],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Sound of screams but the'),
              color: Colors.teal[300],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Who scream'),
              color: Colors.teal[400],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Revolution is coming...'),
              color: Colors.teal[500],
            ),
            Container(
              padding: const EdgeInsets.all(8),
              child: const Text('Revolution, they...'),
              color: Colors.teal[600],
            ),
          ],
        ),
      ),
    );
  }
}

【讨论】：

如何更改容器或卡片尺寸？
使用高度和宽度属性

【解决方案3】：

根据给出的参考，我认为你应该以这种格式编码：

Column(
 children: [
   Text(),
   Row(
     children: [
       RaisedButton(),
       RaisedButton(),
     ]  
   ),
   SizedBox(),

   Text(),
   Row(
    children: [
     RaisedButton(),
     RaisedButton(),
    ]  
   ),
   SizedBox(),

   Text(),
   Row(
    children: [
      RaisedButton(),
      RaisedButton(),
    ]  
   ),
 

 ],
),

【讨论】：

【解决方案4】：

我建议这样做：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: _App(),
    ),
  );
}

class RowWithButtonsData {
  final String text;
  final String leftButtonText;
  final String rightButtonText;
  final VoidCallback leftButtonPressed;
  final VoidCallback rightButtonPressed;

  RowWithButtonsData({
    required this.text,
    required this.leftButtonText,
    required this.rightButtonText,
    required this.leftButtonPressed,
    required this.rightButtonPressed,
  });
}

final rowsList = [
  RowWithButtonsData(
      text: 'Row1',
      leftButtonText: 'Row1 Left Button',
      rightButtonText: 'Row1 Right Button',
      leftButtonPressed: () {},
      rightButtonPressed: () {}),
  RowWithButtonsData(
      text: 'Row2',
      leftButtonText: 'Row2 Left Button',
      rightButtonText: 'Row2 Right Button',
      leftButtonPressed: () {},
      rightButtonPressed: () {}),
  RowWithButtonsData(
      text: 'Row3',
      leftButtonText: 'Row3 Left Button',
      rightButtonText: 'Row3 Right Button',
      leftButtonPressed: () {},
      rightButtonPressed: () {}),
];

class _App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView.builder(
          itemCount: rowsList.length,
          itemBuilder: (context, i) => RowWithButtons(
            text: rowsList[i].text,
            leftButtonText: rowsList[i].leftButtonText,
            rightButtonText: rowsList[i].rightButtonText,
            leftButtonPressed: rowsList[i].leftButtonPressed,
            rightButtonPressed: rowsList[i].rightButtonPressed,
          ),
        ),
      ),
    );
  }
}

class RowWithButtons extends StatelessWidget {
  const RowWithButtons({
    Key? key,
    required this.text,
    required this.leftButtonText,
    required this.rightButtonText,
    required this.leftButtonPressed,
    required this.rightButtonPressed,
  }) : super(key: key);

  final String text;
  final String leftButtonText;
  final String rightButtonText;
  final VoidCallback leftButtonPressed;
  final VoidCallback rightButtonPressed;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(text),
          SizedBox(
            height: 5,
          ),
          Row(
            children: [
              ElevatedButton(
                onPressed: leftButtonPressed,
                child: Text(leftButtonText),
              ),
              SizedBox(
                width: 10,
              ),
              ElevatedButton(
                onPressed: rightButtonPressed,
                child: Text(rightButtonText),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

使用数据类，您只需在 rowsList 中添加新项目即可添加新行，因此它是更具可扩展性和优雅的解决方案恕我直言。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案5】：

当您输入新行时，您没有使用新行小部件。每次开始新行时，请使用 Row() 小部件。

首先你应该为凸起的按钮创建一个小部件。

Widget Button_Raised(){
onPressed(){}, child: Text('Your text goes here'),}

像这样。并且不要在任何可以将上面的小部件包装在容器内的地方使用这些容器。最后将您的 Column 包裹在 Wrap 小部件周围，这将导致该行在填充时自动转移到下一行。

每次开始新行时使用新行。

【讨论】：

您还应该将文本传递给 Widget，否则所有按钮将具有相同的文本，例如：Widget Button_Raised(String myText){ onPressed(){}, child: Text(myText), }