布局亂七八糟

我正在嘗試創建一個簡單的登錄表單，其中有一個影像和兩個按鈕：

這是我的代碼：

import 'package:flutter/material.dart';
import 'package:smart_shop/screens/login.dart';
import 'package:smart_shop/screens/signup.dart';

class LoginSignup extends StatefulWidget {
  static String id = "LoginSignup";

  @override
  _LoginSignupState createState() => _LoginSignupState();
}

class _LoginSignupState extends State<LoginSignup> {
  List<Widget> _screens = [Login(), Signup()];
  int _screenNo = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [

              Image.asset("images/Group 22.png"),
              SizedBox(
                height: 30,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  FlatButton(
                    onPressed: () {
                      setState(() {
                        _screenNo = 0;
                      });
                    },
                    child: Container(
                      child: Text(
                        "Sign up",
                        style: TextStyle(
                            fontSize: 20
                        ),
                      ),
                      decoration: BoxDecoration(
                        border: Border(
                          bottom: BorderSide(
                            color: Colors.redAccent,
                            width: 3
                          )
                        )
                      ),
                    )
                  ),

                  FlatButton(
                    onPressed: () {},
                    child: Container(
                      child: Text(
                        "Login",
                        style: TextStyle(
                            fontSize: 20
                        ),
                      ),
                      decoration: BoxDecoration(
                          border: Border(
                              bottom: BorderSide(
                                  color: Colors.redAccent,
                                  width: 3
                              )
                          )
                      ),
                    ),
                  )
                ],
              ),
              _screens[_screenNo]
            ],
          ),
        ),
      ),
    );
  }
}

登錄：

import 'package:flutter/material.dart';

class Login extends StatefulWidget {
  const Login({Key? key}) : super(key: key);

  @override
  _LoginState createState() => _LoginState();
}

class _LoginState extends State<Login> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(

        ),
      ),
    );
  }
}

注冊：

import 'package:flutter/material.dart';

class Signup extends StatefulWidget {
  const Signup({Key? key}) : super(key: key);

  @override
  _SignupState createState() => _SignupState();
}

class _SignupState extends State<Signup> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(

        ),
      ),
    );
  }
}

但是每當我嘗試運行該應用程式時，我都會得到這個 UI：

我收到以下錯誤：

RenderCustomMultiChildLayoutBox object was given an infinite size during layout.

即使我在登錄和注冊時將任何子項添加到列小部件，我也會遇到同樣的錯誤。

可能是什么問題呢？

uj5u.com熱心網友回復：

問題來自 _screens[_screenNo]，您已經擁有SingleChildScrollView了 parent on _LoginSignupState，您不需要包裝另一個SingleChildScrollView和Scaffoldon_screens專案。

洗掉Scaffold和SingleChildScrollView從_SignupState和_LoginState小部件。

class Login extends StatefulWidget {
  const Login({Key? key}) : super(key: key);

  @override
  _LoginState createState() => _LoginState();
}

class _LoginState extends State<Login> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [],
    );
  }
}

和

class Signup extends StatefulWidget {
  const Signup({Key? key}) : super(key: key);

  @override
  _SignupState createState() => _SignupState();
}

class _SignupState extends State<Signup> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [],
    );
  }
}

uj5u.com熱心網友回復：

我認為錯誤可能是由您的小部件結構引起的。

小部件樹的第一部分沒問題，但是當您呼叫時，_screens[_screenNo]您正在樹中嵌套Login或Signup小部件。

生成的樹將有 2 個 Scaffold 和 SingleChildScrollView，這不好。

由于您已經在 Scaffold 和 ScrollView 中，因此我將重寫Login和Signup小部件如下：

class Signup extends StatefulWidget {
  const Signup({Key? key}) : super(key: key);

  @override
  _SignupState createState() => _SignupState();
}

class _SignupState extends State<Signup> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children:[]
    );
  }
}

標籤：扑 镖

上一篇：在顫動中使用手勢檢測器輕敲容器時更改容器顏色

下一篇：Flutter/DartDateFormat12:27到00:27錯誤，小時0錯誤