Flutter登录页面如何实现含跳转按钮的自动换行文本

Absolutely! This is totally achievable in Flutter — it’s a super common pattern for login/signup screens, and you can handle both the auto-wrapping text and clickable links smoothly.

Here’s a straightforward implementation using RichText, which natively supports text wrapping and mixed interactive/non-interactive text segments:

Step 1: Basic Implementation (with inline gesture handlers) #

First, use the RichText widget to compose your text. Each clickable link will be a TextSpan with a TapGestureRecognizer to trigger navigation:

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class LoginScreen extends StatelessWidget {
  const LoginScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 24.0),
          child: RichText(
            textAlign: TextAlign.center, // Optional: center-align for better UI
            text: TextSpan(
              // Base style for all non-interactive text
              style: const TextStyle(color: Colors.grey, fontSize: 14),
              children: [
                const TextSpan(text: 'By continuing you agree the xxx '),
                TextSpan(
                  text: 'Terms & Conditions',
                  style: const TextStyle(color: Colors.blue), // Highlight clickable text
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      // Navigate to your Terms & Conditions page
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => const TermsConditionsPage(),
                        ),
                      );
                    },
                ),
                const TextSpan(text: ' and '),
                TextSpan(
                  text: 'Privacy Policy',
                  style: const TextStyle(color: Colors.blue),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      // Navigate to your Privacy Policy page
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => const PrivacyPolicyPage(),
                        ),
                      );
                    },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

// Dummy page components for example
class TermsConditionsPage extends StatelessWidget {
  const TermsConditionsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: const Text('Terms & Conditions')));
  }
}

class PrivacyPolicyPage extends StatelessWidget {
  const PrivacyPolicyPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: const Text('Privacy Policy')));
  }
}

Step 2: Avoid Memory Leaks (for Stateful Widgets) #

If your login screen is a StatefulWidget, make sure to dispose of the gesture recognizers properly to prevent memory leaks:

class LoginScreen extends StatefulWidget {
  const LoginScreen({super.key});

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  TapGestureRecognizer? _termsRecognizer;
  TapGestureRecognizer? _privacyRecognizer;

  @override
  void initState() {
    super.initState();
    _termsRecognizer = TapGestureRecognizer()..onTap = _navigateToTerms;
    _privacyRecognizer = TapGestureRecognizer()..onTap = _navigateToPrivacy;
  }

  @override
  void dispose() {
    // Dispose recognizers when the widget is removed
    _termsRecognizer?.dispose();
    _privacyRecognizer?.dispose();
    super.dispose();
  }

  void _navigateToTerms() {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const TermsConditionsPage()),
    );
  }

  void _navigateToPrivacy() {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const PrivacyPolicyPage()),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 24.0),
          child: RichText(
            textAlign: TextAlign.center,
            text: TextSpan(
              style: const TextStyle(color: Colors.grey, fontSize: 14),
              children: [
                const TextSpan(text: 'By continuing you agree the xxx '),
                TextSpan(
                  text: 'Terms & Conditions',
                  style: const TextStyle(color: Colors.blue),
                  recognizer: _termsRecognizer,
                ),
                const TextSpan(text: ' and '),
                TextSpan(
                  text: 'Privacy Policy',
                  style: const TextStyle(color: Colors.blue),
                  recognizer: _privacyRecognizer,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Key Notes: #

• Auto-Wrapping: RichText automatically wraps text based on the available screen width — no extra setup needed for different screen sizes.
• Interactive Links: The TapGestureRecognizer ensures each link responds to taps and navigates to the correct page.
• Styling: You can customize the link colors, font weights, or underlines to make them stand out (add decoration: TextDecoration.underline to the link TextSpan style if you want underlines).

If you hit any issues with navigation or styling, feel free to ask for more tweaks!

内容的提问来源于stack exchange，提问作者Kitcc