Question

我正在登录屏幕。我想输入以下文字：“继续，您同意xxx条款和条件以及隐私权政策”，其中-条款和条件-和-隐私权政策-是单击时可导航至两个单独屏幕的按钮。

在Flutter中有可能吗？请注意，由于最终文本字符串的长度，根据屏幕尺寸，它可能会缠绕在多行上。

真的很感谢您的帮助。

卡森

Answer 1

您可以使用RichText来实现

class DoItWithRichText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: RichText(
            text: TextSpan(
              text: "By continuing you agree the",
              children:[
                TextSpan(
                  text: " Terms and Conditions",
                  style: TextStyle(
                    color: Colors.blue
                  ),
                  recognizer: TapGestureRecognizer()..onTap = () => Navigator.of(context).push(MaterialPageRoute(builder: (context) => TermsAndConditions()))
                ),
                TextSpan(
                  text: " and "
                ),
                TextSpan(
                  text: "Privacy Policy",
                  style: TextStyle(
                    color: Colors.blue
                  ),
                    recognizer: TapGestureRecognizer()..onTap = () => Navigator.of(context).push(MaterialPageRoute(builder: (context) => PrivacyAndPolicy()))
                )
              ],
              style: TextStyle(
                color: Colors.black,
                fontSize: 13
              )
            ),

          ),
        ),
      ),
    );
  }
}

Answer 2

您可以使用RawMaterialButton来做到这一点：

    class LongTextRowWidget extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('By continuing you agree to the xxx '),
            InlineTextButton(text: 'Terms and Conditions', function: _jumpToTermsAndConditions),
            const Text(' and '),
            InlineTextButton(text: 'Privacy Policy', function: _jumpToPrivacyPolicy),
          ],
        );
      }
    }

    class InlineTextButton extends StatelessWidget {
      final String text;
      final Function function;
      InlineTextButton({this.text, this.function});
      @override
      Widget build(BuildContext context) {
        return RawMaterialButton(
          constraints: BoxConstraints(),
          onPressed: function,
          child: Text(
            text,
            style: TextStyle(
              fontWeight: FontWeight.bold,
              color: Theme.of(context).primaryColor,
            ),
          ),
        );
      }
    }

带有嵌入式按钮的Flutter文本小部件

2 个答案: