Question

我在Row中使用了两个小部件（文本和Flatbutton）。无论我做什么，它们之间都有空间。我不希望他们之间有任何距离怎么做？

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text("TextColor checking"),
    ),
    body:
Row(mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
             Text("Already have a account?"),
               FlatButton(
                  onPressed: () {},
                  child: Text("Login"),
                  textColor: Colors.indigo,
                ),


          ],
        ),
       ),
    );
  }
}

我想要这样：已经有一个帐户？登录

Answer 1

如果要创建类似这样的简单文本，请不要使用行或平面按钮。改用RTF。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("TextColor checking"),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: RichText(
            text: TextSpan(
              style: TextStyle(fontSize: 16, color: Colors.white),
              children: <TextSpan>[
                TextSpan(
                  text: "Don't have an account? ",
                ),
                TextSpan(
                  text: "Login",
                  style: TextStyle(
                    //Add any decorations here
                    color: Colors.indigo,
                    decoration: TextDecoration.underline,
                  ),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      //Enter the function here
                    },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 2

由于使用FlatButton并且FlatButton缺省情况下具有填充，所以您获得了空格。您应该改用GestureDetector。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("TextColor checking"),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text("Already have a account? "),
              GestureDetector(
                onTap: () {},
                child: Text(
                  "Login",
                  style: TextStyle(
                    color: Colors.indigo,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 3

我尝试了您的代码，接缝处的空间不是组件之间，而是FlatButton的填充。要删除它，您将使用其他组件而不是Flat Button。试试下面的

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("TextColor checking"),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text("Already have a account?"),
              RawMaterialButton(
                  constraints: BoxConstraints(),
                  padding: EdgeInsets.all(
                      5.0), // optional, in order to add additional space around text     if needed
                  child: Text('Login'),
                  onPressed: () {})
//               FlatButton(
//                 onPressed: () {},
//                 child: Text("Login"),
//                 textColor: Colors.indigo,
//               ),
            ],
          ),
        ),
      ),
    );
  }
}

删除行中的小部件之间的空间-Flutter

3 个答案: