Flutter自定义对齐

snvhrwxg 于 2023-04-13 发布在 Flutter

关注(0)|答案(4)|浏览(159)

我有一个按钮：

这只是一个简单的按钮，文本居中对齐。现在想象一下，我需要在水平轴的文本旁边添加一个小部件！
就像这样：

SizedBox(
  width: double.infinity,
  height: 56,
  child: TextButton(
    style: ButtonStyle(
      backgroundColor: MaterialStateProperty.all<Color>(
        const Color(0XFF00966D),
      ),
      foregroundColor: MaterialStateProperty.all<Color>(
        const Color(0XFFFAFAFA),
      ),
      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
        const RoundedRectangleBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(8),
          ),
        ),
      ),
    ),
    onPressed: () {
      Navigator.popAndPushNamed(context, "signupPhoneVerification");
    },
    child: const Text('Sign Up'),
  ),
),

我该怎么做？

flutter

来源：https://stackoverflow.com/questions/75992270/flutter-custom-alignment

4条答案

按热度按时间

vc6uscn91#

有很多方法可以做到这一点：
使用SizedBox()-将行的子级划分为3个大小相同的部分：

SizedBox(
            width: double.infinity,
            height: 56,
            child: TextButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all<Color>(
                  const Color(0XFF00966D),
                ),
                foregroundColor: MaterialStateProperty.all<Color>(
                  const Color(0XFFFAFAFA),
                ),
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                  const RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(
                      Radius.circular(8),
                    ),
                  ),
                ),
              ),
              onPressed: () {
                Navigator.popAndPushNamed(context, "signupPhoneVerification");
              },
              child: Row(
                children: [
                  SizedBox(
                    width: MediaQuery.of(context).size.width / 3.3,
                    child: Container(),
                  ),
                  SizedBox(
                      width: MediaQuery.of(context).size.width / 3.3,
                      child: const Text('Sign Up', textAlign: TextAlign.center,)
                  ),
                  SizedBox(
                      width: MediaQuery.of(context).size.width / 3.3,
                      child: const Icon(Icons.star)
                  ),
                ],
              ),
            ),
          ),

使用MainAxisAlignment.center-在左侧添加一个小部件来平衡它：

SizedBox(
            width: double.infinity,
            height: 56,
            child: TextButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all<Color>(
                  const Color(0XFF00966D),
                ),
                foregroundColor: MaterialStateProperty.all<Color>(
                  const Color(0XFFFAFAFA),
                ),
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                  const RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(
                      Radius.circular(8),
                    ),
                  ),
                ),
              ),
              onPressed: () {
                Navigator.popAndPushNamed(context, "signupPhoneVerification");
              },
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const [
                  SizedBox(
                    width: 50
                  ),
                  Text('Sign Up', textAlign: TextAlign.center,),
                  Icon(Icons.star),
                ],
              ),
            ),
          ),

Stack：

SizedBox(
            width: double.infinity,
            height: 56,
            child: TextButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all<Color>(
                  const Color(0XFF00966D),
                ),
                foregroundColor: MaterialStateProperty.all<Color>(
                  const Color(0XFFFAFAFA),
                ),
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                  const RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(
                      Radius.circular(8),
                    ),
                  ),
                ),
              ),
              onPressed: () {
                Navigator.popAndPushNamed(context, "signupPhoneVerification");
              },
              child: Stack(
                alignment: Alignment.center,
                clipBehavior: Clip.none,
                children: const [
                  Text('Sign Up', textAlign: TextAlign.center,),
                  Positioned(
                    right: -50,
                      child: Icon(Icons.star)
                  ),
                ],
              ),
            ),
          ),

赞(0）回复(0）举报 2023-04-13

mpbci0fu2#

用stack Package 你的按钮。你可以随意将你的小部件放在任何你想要的地方，比一排的方式更好，你会意识到任何溢出。

赞(0）回复(0）举报 2023-04-13

zfycwa2u3#

使用TextButton如下：

SizedBox(
  width: double.infinity,
  height: 56,
  child: TextButton(
    style: ButtonStyle(
      backgroundColor: MaterialStateProperty.all<Color>(
        const Color(0XFF00966D),
      ),
      foregroundColor: MaterialStateProperty.all<Color>(
        const Color(0XFFFAFAFA),
      ),
      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
        const RoundedRectangleBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(8),
          ),
        ),
      ),
    ),
    onPressed: () {
      Navigator.popAndPushNamed(context, "signupPhoneVerification");
    },
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [
        Text('Sign Up'),
        Icon(Icons.abc_rounded),
      ],
    ),
  ),
),

赞(0）回复(0）举报 2023-04-13

w46czmvw4#

使用Row小部件 Package 文本小部件，并在文本小部件之后添加所需的小部件。
可以使用child: Row( children: [ const Text('Sign Up'), [your_widget],])代替child: const Text('Sign Up')

赞(0）回复(0）举报 2023-04-13