Question

我一般都不熟悉，也不熟悉编程。我的问题是我无法添加

child: Align(
                alignment: Alignment(0, 48),
                  child: Text(
                'SETS',
                style: TextStyle(
                    fontWeight: FontWeight._(4),
                    fontSize: 18.0,
                    fontFamily: 'Roboto',
                    color: Color(0xFF494949)),

              )),

此代码

class _SetupState extends State<Setup> {
  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Align(
          alignment: Alignment.topCenter,
          child: SizedBox(
            height: 350.0,
            width: 350.0,

            child: Container(
              margin: const EdgeInsets.only(top: 6.0),
              padding: EdgeInsets.all(8),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15.0),
                color: Color(0xFFE3E3E3),
              ),

              child: Align(
                alignment: Alignment.topCenter,
                  child: Text(
                'SET UP YOUR WORKOUT',
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 20.0,
                    fontFamily: 'Roboto',
                    color: Color(0xFF494949)),
              )),
            ),
          )),
    ]);
  }
}

我尝试将其添加到容器中，进行了新的对齐，但是我仍然没有成功。感谢您的帮助！

Answer 1

我根据评论中提供的图像进行了布局：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 350.0,
          width: 350.0,
          child: Container(
            margin: const EdgeInsets.only(top: 6.0),
            padding: EdgeInsets.all(8),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(15.0),
              color: Color(0xFFE3E3E3),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  'SET UP YOUR WORKOUT',
                  style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 20.0,
                      fontFamily: 'Roboto',
                      color: Color(0xFF494949)),
                ),
                Column(
                  children: <Widget>[
                    Text(
                      'SETS',
                      style: TextStyle(
                          fontWeight: FontWeight.w400,
                          fontSize: 16.0,
                          fontFamily: 'Roboto',
                          color: Color(0xFF494949)),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 50),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Icon(
                              Icons.add
                          ),
                          Icon(
                              Icons.remove
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
                Column(
                  children: <Widget>[
                    Text(
                      'WORKS',
                      style: TextStyle(
                          fontWeight: FontWeight.w400,
                          fontSize: 16.0,
                          fontFamily: 'Roboto',
                          color: Color(0xFF494949)),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 50),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Icon(
                              Icons.add
                          ),
                          Icon(
                              Icons.remove
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
                Column(
                  children: <Widget>[
                    Text(
                      'RESTS',
                      style: TextStyle(
                          fontWeight: FontWeight.w400,
                          fontSize: 16.0,
                          fontFamily: 'Roboto',
                          color: Color(0xFF494949)),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 50),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Icon(
                              Icons.add
                          ),
                          Icon(
                              Icons.remove
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
                Row(
                  children: <Widget>[
                    Expanded(
                      child: FlatButton(
                        color: Colors.greenAccent,
                        child: Text(
                            'START',
                          style: TextStyle(
                            fontSize: 40,
                            color: Colors.white,
                            fontWeight: FontWeight.w400
                          ),
                        ),
                        onPressed: () {
                        },
                        shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0)),
                      ),
                    ),
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

我在整个灰色框中使用了Column（将其命名为column1），以及（SETS，+，-），（WORK，+，-）和（RESTS，+，- ）是column1内的Column。每个（+，-）都是用Row包装的Padding。 Padding用于使（+，-）变得更接近框的中心。

有很多方法可以进行这种布局，这只是一种。

结果：

Answer 2

如果这不起作用，您可以先按所需的方式对齐它。然后使用padding或margin，以便可以将其准确放置在所需位置。

Container(
 padding:
 alignment:
 child:Text()
 )

我在将文本添加到容器时遇到问题

2 个答案: