并排制作两个小部件

Question

我有以下代码，我想要并排显示国家代码和 phone 号码，如何获取？我尝试了多个示例，有时它会完全消失，有时会崩溃。我有以下代码，我想要国家代码和 phone 号码并排，如何获得？我已经尝试了多个示例，有时它会完全消失，有时会崩溃。

import 'package:flutter/material.dart';



class Signup extends StatefulWidget{

  Signup({Key key}) : super (key:key);
  final String title;

  @override
  SignupPage createState() => new SignupPage();

}

class SignupPage extends State<Signup> {

List<String> _ccodes = <String>['', '+65', '+91', '+60', '+61'];
String _ccode = '';

@override
Widget build(BuildContext context) {


final name = TextFormField(
keyboardType: TextInputType.text,
autofocus: false,
initialValue: 'Techie Quickie',
decoration: InputDecoration(
  hintText: 'Name',
  contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),

  border: OutlineInputBorder(

    borderRadius: BorderRadius.circular(32.0)
  ),

),
);

final email = TextFormField(
keyboardType: TextInputType.emailAddress,
autofocus: false,
initialValue: 'tq@gmail.com',
decoration: InputDecoration(
  hintText: 'Email',
  contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),

  border: OutlineInputBorder(

    borderRadius: BorderRadius.circular(32.0)
  ),

),

);

final password = TextFormField(
keyboardType: TextInputType.text,
obscureText: true,
autofocus: false,
initialValue: 'password',
decoration: InputDecoration(
  hintText: 'Password',
  contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
  border: OutlineInputBorder(

    borderRadius: BorderRadius.circular(32.0)
  ),

),

);

final passwordConfirmation = TextFormField(
keyboardType: TextInputType.text,
obscureText: true,
autofocus: false,
initialValue: 'password',
decoration: InputDecoration(
  hintText: 'Password',
  contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
  border: OutlineInputBorder(

    borderRadius: BorderRadius.circular(32.0)
  ),

),

);

final loginButton = Padding(
  padding: EdgeInsets.symmetric(vertical: 16.0),
  child: Material(
    borderRadius: BorderRadius.circular(30.0),
    shadowColor: Colors.lightBlueAccent.shade100,
    elevation: 5.0,
    child: MaterialButton(
      minWidth: 200.0,
      height: 42.0,
      onPressed: (){
        print("Signup button clicked");
      },
      color: Colors.lightBlueAccent,
      child: 
        Text('Sign Up', 
        style: TextStyle(color: Colors.white, fontSize: 20.0),
        ),
    ),
  )
);

final countryCode =  DropdownButton<String>(
          value: _ccode,
          isDense: true,
          items: _ccodes.map((String value) {
                          return new DropdownMenuItem<String>(
                            value: value,
                            child: new Text(value),
                          );
                        }).toList(),
                  onChanged: (String newValue) {
                          setState(() {
                            _ccode = newValue;
                          });
                        }
  )
  ;

final phonenumber = TextFormField(
keyboardType: TextInputType.phone,
autofocus: false,
initialValue: '91166666',
decoration: InputDecoration(
  hintText: 'Phone Number',
  contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
  border: OutlineInputBorder(    
    borderRadius: BorderRadius.circular(32.0)
  ),

),

);


return Scaffold(
  backgroundColor: Colors.white,
  body: Center  (
    child: ListView(
      padding: EdgeInsets.only(left: 24.0, right: 24.0), 
      shrinkWrap: true,
      children: <Widget>[

        name,
        SizedBox(height: 18.0),
        email,
        SizedBox(height: 18.0),
        password,
        SizedBox(height: 18.0),
        passwordConfirmation,
        SizedBox(height: 18.0),

        Row(
        children: [
          new Expanded(
            child: new Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children:  [
                  countryCode,
                  SizedBox(height: 18.0),



              ],

            ),
          ),


        ],
      ),

        phonenumber,
                  SizedBox(height: 18.0),

        loginButton,        
        SizedBox(height: 38.0),
      ],
      )
      )


);
}
}

Answer 1

尝试检查此 URL：https://flutter.io/tutorials/layout/ 您可以在 body 中有不同的行以具有相邻的组件。

所以层次结构就像

Body
Container
Row{
Child: (item1)
Child(item2)}

希望这对您有所帮助。 :)

Answer 2

问题与 TextField 的呈现方式及其尺寸有关。您可以在 and this issue.

中找到更多详细信息

无论如何这段代码应该可以工作：

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    title: 'My app', // used by the OS task switcher
    home: new Signup(),
  ));
}

class Signup extends StatefulWidget {
  Signup({Key key}) : super(key: key);
  final String title;

  @override
  SignupPage createState() => new SignupPage();
}

class SignupPage extends State<Signup> {
  List<String> _ccodes = <String>['', '+65', '+91', '+60', '+61'];
  String _ccode = '';

  @override
  Widget build(BuildContext context) {
    final name = TextFormField(
      keyboardType: TextInputType.text,
      autofocus: false,
      initialValue: 'Techie Quickie',
      decoration: InputDecoration(
        hintText: 'Name',
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
      ),
    );

    final email = TextFormField(
      keyboardType: TextInputType.emailAddress,
      autofocus: false,
      initialValue: 'tq@gmail.com',
      decoration: InputDecoration(
        hintText: 'Email',
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
      ),
    );

    final password = TextFormField(
      keyboardType: TextInputType.text,
      obscureText: true,
      autofocus: false,
      initialValue: 'password',
      decoration: InputDecoration(
        hintText: 'Password',
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
      ),
    );

    final passwordConfirmation = TextFormField(
      keyboardType: TextInputType.text,
      obscureText: true,
      autofocus: false,
      initialValue: 'password',
      decoration: InputDecoration(
        hintText: 'Password',
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
      ),
    );

    final loginButton = Padding(
        padding: EdgeInsets.symmetric(vertical: 16.0),
        child: Material(
          borderRadius: BorderRadius.circular(30.0),
          shadowColor: Colors.lightBlueAccent.shade100,
          elevation: 5.0,
          child: MaterialButton(
            minWidth: 200.0,
            height: 42.0,
            onPressed: () {
              print("Signup button clicked");
            },
            color: Colors.lightBlueAccent,
            child: Text(
              'Sign Up',
              style: TextStyle(color: Colors.white, fontSize: 20.0),
            ),
          ),
        ));

    final countryCode = DropdownButton<String>(
        value: _ccode,
        isDense: true,
        items: _ccodes.map((String value) {
          return new DropdownMenuItem<String>(
            value: value,
            child: new Text(value),
          );
        }).toList(),
        onChanged: (String newValue) {
          setState(() {
            _ccode = newValue;
          });
        });

    final phonenumber = TextFormField(
      keyboardType: TextInputType.phone,
      autofocus: false,
      initialValue: '91166666',
      decoration: InputDecoration(
        hintText: 'Phone Number',
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
      ),
    );

    return Scaffold(
        backgroundColor: Colors.white,
        body: Center(
            child: ListView(
          padding: EdgeInsets.only(left: 24.0, right: 24.0),
          shrinkWrap: true,
          children: <Widget>[
            name,
            SizedBox(height: 18.0),
            email,
            SizedBox(height: 18.0),
            password,
            SizedBox(height: 18.0),
            passwordConfirmation,
            SizedBox(height: 18.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                countryCode,
                new Flexible(child: phonenumber),
              ],
            ),
            SizedBox(height: 18.0),
            loginButton,
            SizedBox(height: 38.0),
          ],
        )));
  }
}

并排制作两个小部件

Make two widgets side by side

dart

flutter

flutter-layout