【问题标题】:Make two widgets side by side并排制作两个小部件
【发布时间】:2018-10-26 20:06:45
【问题描述】:

我有以下代码,我想要国家代码和电话号码并排,如何获得?我尝试了多个示例,有时它会完全消失,有时会崩溃。我有以下代码,我想要并排的国家代码和电话号码,如何获得?我尝试了多个示例,有时它会完全消失,有时会崩溃。

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),
      ],
      )
      )


);
}
}

【问题讨论】:

    标签: dart flutter flutter-layout


    【解决方案1】:

    问题与 TextField 的呈现方式及其尺寸有关。您可以在此question 和此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),
              ],
            )));
      }
    }
    

    【讨论】:

      【解决方案2】:

      尝试检查此网址:https://flutter.io/tutorials/layout/ 你可以在你的身体里有不同的行来拥有相邻的组件。

      所以层次结构是这样的

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

      希望这会有所帮助。 :)

      【讨论】:

      • 根本没有帮助。
      • 我想知道这如何得到两个赞成票和大师本人的编辑。
      猜你喜欢
      • 2021-02-20
      • 2021-04-09
      • 2020-04-23
      • 1970-01-01
      • 1970-01-01
      • 2017-08-06
      • 2021-04-27
      • 2018-10-09
      • 2020-05-30
      相关资源
      最近更新 更多