多个按钮/文本在一个圆圈中颤动

Posted 2023-02-23

【中文标题】多个按钮/文本在一个圆圈中颤动

【英文标题】：Multiple buttons/Texts in a circle in flutter

【发布时间】：2020-03-28 21:39:57

【问题描述】：

我正在尝试在颤动中创建一个圆圈。我想添加多个按钮并将它们绑定在这样的圆圈中。 标记的字段应该是按钮，Course 1 只是文本。 我可以创建这样的东西，但它只是在按钮中拆分的字符串。 这是我的代码。我不知道如何完成这项任务。我是 Flutter 新手。

import 'package:flutter/material.dart';
void main()runApp(MyApp());
class MyApp extends StatelessWidget 
@override
Widget build(BuildContext context) 
return MaterialApp(
home: Scaffold(
  appBar: new AppBar(
    title: Text("Student home"),
  ),
  body:Center(
    child: Container(
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.all(10),
      width: 200,
      height: 200,
      child: Center(
        child: Text("Course 1 \n Course 2",

            style: TextStyle(fontSize: 12.0,
              fontStyle: FontStyle.italic,


        ),

          textAlign: TextAlign.center,

        ),
      ),
      decoration: BoxDecoration(
        border:Border.all(width:3),
        borderRadius: BorderRadius.all(
          Radius.circular(50),
        ),
          color: Colors.yellow,
      ),
    ),
  )
),
);

【参考方案1】：

试试shape: BoxShape.circle,，

          Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(
              border: Border.all(width: 2),
              shape: BoxShape.circle,
              // You can use like this way or like the below line
              //borderRadius: new BorderRadius.circular(30.0),
              color: Colors.amber,
            ),
            child:Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('ABC'),
                Text('XYZ'),
                Text('LOL'),
              ],
            ),
          ),

输出

【参考方案2】：

这是您想要的设计吗？

它包含两个按钮和一个文本小部件

 body: Center(
        child: Container(
          margin: EdgeInsets.all(10),
          padding: EdgeInsets.all(10),
          width: 200,
          height: 200,
          child: Center(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  "Course 1",
                  style: TextStyle(
                    fontSize: 12.0,
                    fontStyle: FontStyle.italic,
                  ),
                  textAlign: TextAlign.center,
                ),
                MaterialButton(
                  onPressed: () 
                    //do whatever you want
                  ,
                  child: Text("Mark Attendance"),
                ),
                MaterialButton(
                  onPressed: () 
                    //do whatever you want
                  ,
                  child: Text("Mark Attendance"),
                ),
              ],
            ),
          ),
          decoration: BoxDecoration(
            border: Border.all(width: 3),
            borderRadius: BorderRadius.all(
              Radius.circular(200),
            ),
            color: Colors.yellow,
          ),
        ),
      ), 

【讨论】：

是的。这就是我想要做的。谢谢

【参考方案3】：

有多种方法可以使边框变圆。到目前为止，您使用的是固定的高度和宽度，边框半径总是使用更大的数字。

例如。 当您的身高为 200X200 时，使用 150-200 数字作为边框半径。

这是在容器的高度和宽度固定时可以正常工作的代码。

注意：这仅在容器的高度和宽度固定时才有效，因为代码中的填充是静态的。如果您想要动态，请使用屏幕计算技术来制作是否响应

在 Flutter 中使任何小部件可点击。

有几个小部件可用于使任何小部件可点击

手势检测器

这个小部件有很多方法，包括onTap()，这意味着您可以在用户点击小部件时附加一个回调。例如（这在您的代码中使用）

GestureDetector( onTap: (), //this is call back on tap child: Text("Mark Attendance") )

InkWell 小部件（注意：此小部件仅在它是 Material 小部件的子部件时才有效）

Material( child: InkWell( onTap: (), child: Text("Mark Attendance"), ), )

这是工作代码。

import 'package:flutter/material.dart';
void main()runApp(MyApp());
class MyApp extends StatelessWidget 
@override
Widget build(BuildContext context) 
return MaterialApp(
home: Scaffold(
  appBar: new AppBar(
    title: Text("Student home"),
  ),
  body:Center(
    child: Container(
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.all(10),
      width: 200,
      height: 200,
      child: Column(

        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(bottom:40.0,top: 20.0),
            child: Text("Course 1"),
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[

             Padding(
               padding: const EdgeInsets.all(8.0),
               child: GestureDetector(
                 onTap: (),
                 child: Text("Mark Attendance")),
             ),
             Padding(
               padding: const EdgeInsets.all(8.0),
               child:Material(
                 child: InkWell(
                   onTap: (),
                   child: Text("Mark Attendance"),
                 ),
               )
             ),
          ],)
        ],
      ),
      decoration: BoxDecoration(
        border:Border.all(width:3),
        borderRadius: BorderRadius.all(
          Radius.circular(150),
        ),
          color: Colors.yellow,
      ),
    ),
  )
),
);
 

注意：材质小部件始终将文本的背景设置为白色 小部件

谢谢，希望信息对你有帮助