首页 > 解决方案 > 如何在颤动中定位文本?

问题描述

我是新来的。我想在按钮上方设置一个文本/标签。我没有在颤振中找到任何简单的文本或标签小部件。

文字应该很大(图片)并且在屏幕的右侧,我想保持按钮的位置。如何使用 Flutter 实现这一目标?

感谢您的帮助。

在此处输入图像描述

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.only(top: 375.0),
          child: Column(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  SizedBox(
                    height: 100,
                    width: 90,
                    child: FloatingActionButton(
                      elevation: 0.2,
                      onPressed: () {},
                      child: Text("1"),
                    ),
                  ),
                  SizedBox(
                    height: 100,
                    width: 90,
                    child: FloatingActionButton(
                      elevation: 0.2,
                      onPressed: () {},
                      child: Text("2"),
                    ),
                  ),
                  SizedBox(
                    height: 100,
                    width: 90,
                    child: FloatingActionButton(
                      elevation: 0.2,
                      onPressed: () {},
                      child: Text("3"),
                    ),
                  ),
                  SizedBox(
                    height: 100,
                    width: 90,
                    child: FloatingActionButton(
                      elevation: 0.2,
                      onPressed: () {},
                      child: Text("+"),
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 20,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  SizedBox(
                    height: 100,
                    width: 90,
                    child: FloatingActionButton(
                      elevation: 0.2,
                      onPressed: () {},
                      child: Text("4"),
                    ),
                  ),
                  SizedBox(
                    height: 100,
                    width: 90,
                    child: FloatingActionButton(
                      elevation: 0.2,
                      onPressed: () {},
                      child: Text("5"),
                    ),
                  ),
                  SizedBox(
                    height: 100,
                    width: 90,
                    child: FloatingActionButton(
                      elevation: 0.2,
                      onPressed: () {},
                      child: Text("6"),
                    ),
                  ),
                  SizedBox(
                    height: 100,
                    width: 90,
                    child: FloatingActionButton(
                      elevation: 0.2,
                      onPressed: () {},
                      child: Text("-"),
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 20,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  SizedBox(
                    height: 100,
                    width: 90,
                    child: FloatingActionButton(
                      elevation: 0.2,
                      onPressed: () {},
                      child: Text("7"),
                    ),
                  ),
                  SizedBox(
                    height: 100,
                    width: 90,
                    child: FloatingActionButton(
                      elevation: 0.2,
                      onPressed: () {},
                      child: Text("8"),
                    ),
                  ),
                  SizedBox(
                    height: 100,
                    width: 90,
                    child: FloatingActionButton(
                      elevation: 0.2,
                      onPressed: () {},
                      child: Text("9"),
                    ),
                  ),
                  SizedBox(
                    height: 100,
                    width: 90,
                    child: FloatingActionButton(
                      elevation: 0.2,
                      onPressed: () {},
                      child: Text("*"),
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 20,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  SizedBox(
                    height: 80,
                    width: 290,
                    child: FloatingActionButton.extended(
                      elevation: 0.2,
                      onPressed: () {},
                      label: Text("="),
                      isExtended: true,
                    ),
                  ),
                  SizedBox(
                    height: 100,
                    width: 90,
                    child: FloatingActionButton(
                      elevation: 0.2,
                      onPressed: () {},
                      child: Text("/"),
                    ),
                  )
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

标签: flutterdart

解决方案


在颤动中展开

使用扩展:

Expanded(
          child: Align(
            alignment: Alignment.centerRight,
            child: Text(
              "My Text",
              textAlign: TextAlign.right,
              style: TextStyle(fontSize: 68),
            ),
          ),
        ),

完整代码:

      @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          children: <Widget>[
            SizedBox(height: 24,),
            Expanded(
              child: Align(
                alignment: Alignment.centerRight,
                child: Text(
                  "My Text",
                  textAlign: TextAlign.right,
                  style: TextStyle(fontSize: 68),
                ),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                SizedBox(
                  height: 100,
                  width: 90,
                  child: FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {},
                    child: Text("1"),
                  ),
                ),
                SizedBox(
                  height: 100,
                  width: 90,
                  child: FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {},
                    child: Text("2"),
                  ),
                ),
                SizedBox(
                  height: 100,
                  width: 90,
                  child: FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {},
                    child: Text("3"),
                  ),
                ),
                SizedBox(
                  height: 100,
                  width: 90,
                  child: FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {},
                    child: Text("+"),
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 20,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                SizedBox(
                  height: 100,
                  width: 90,
                  child: FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {},
                    child: Text("4"),
                  ),
                ),
                SizedBox(
                  height: 100,
                  width: 90,
                  child: FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {},
                    child: Text("5"),
                  ),
                ),
                SizedBox(
                  height: 100,
                  width: 90,
                  child: FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {},
                    child: Text("6"),
                  ),
                ),
                SizedBox(
                  height: 100,
                  width: 90,
                  child: FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {},
                    child: Text("-"),
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 20,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                SizedBox(
                  height: 100,
                  width: 90,
                  child: FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {},
                    child: Text("7"),
                  ),
                ),
                SizedBox(
                  height: 100,
                  width: 90,
                  child: FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {},
                    child: Text("8"),
                  ),
                ),
                SizedBox(
                  height: 100,
                  width: 90,
                  child: FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {},
                    child: Text("9"),
                  ),
                ),
                SizedBox(
                  height: 100,
                  width: 90,
                  child: FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {},
                    child: Text("*"),
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 20,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                SizedBox(
                  height: 80,
                  width: 290,
                  child: FloatingActionButton.extended(
                    elevation: 0.2,
                    onPressed: () {},
                    label: Text("="),
                    isExtended: true,
                  ),
                ),
                SizedBox(
                  height: 100,
                  width: 90,
                  child: FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {},
                    child: Text("/"),
                  ),
                )
              ],
            ),
          ],
        ),
      ),
    );
  }

推荐阅读