flutter - SingleChildScrollView 在对话框中不起作用

Question

我创建了一个自定义对话框，但SingleChildScrollView没有在其中工作。我正在为您提供AlertDialog.

我已经SingleChildScrollView在列中换行了，但它也不起作用。

我AlertDialog在 Flutter 中使用过，但它在对话框中没有显示滚动，我不知道为什么。提前致谢

import 'package:floating_action_row/floating_action_row.dart';
import 'package:flutter/material.dart';
import 'package:flutter_icons/flutter_icons.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:salon/pages/JobVacancy.dart';

import 'blockButton.dart';

class VacancyAlert extends StatefulWidget {
  @override
  _VacancyAlertState createState() => _VacancyAlertState();
}

class _VacancyAlertState extends State<VacancyAlert> with TickerProviderStateMixin{
  AnimationController controller;
  Animation<double> scaleAnimation;
  TextEditingController News = TextEditingController();

  @override
  void dispose() {
    News.dispose();
    super.dispose();
  }
  
  @override
  void initState() {
    super.initState();

    controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 450));
    scaleAnimation =
        CurvedAnimation(parent: controller, curve: Curves.elasticInOut);

    controller.addListener(() {
      setState(() {});
    });

    controller.forward();
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      child: SingleChildScrollView(
              child: Center(
        child: Material(
        color: Colors.transparent,
        child: ScaleTransition(
          scale: scaleAnimation,
          child: Container(
            margin: EdgeInsets.all(20.0),
              height: 590,
              decoration: ShapeDecoration(
                  color: Colors.white,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(15.0))),
              child: Column(
                children: <Widget>[
                Container(
                  height: 50,
                  padding: EdgeInsets.symmetric(horizontal: 15),
                  decoration: BoxDecoration(
                    color: Theme.of(context).accentColor,
                    borderRadius: BorderRadius.only(topLeft: Radius.circular(15),topRight: Radius.circular(15))
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Center(
                        child: Text("Post Job",style: GoogleFonts.raleway(color: Colors.white,fontSize: 20)),
                      ),
                      Container(
              height: 40,
              width: MediaQuery.of(context).size.width/5+10,
              decoration: BoxDecoration(
                color: Theme.of(context).accentColor,
                boxShadow: [
                BoxShadow(color: Theme.of(context).focusColor.withOpacity(1.0), blurRadius: 15, offset: Offset(0, 5)),
                BoxShadow(color: Theme.of(context).accentColor.withOpacity(0.3), blurRadius: 15, offset: Offset(0, 5)),
               ],
                borderRadius: BorderRadius.circular(15)
              ),
              padding: EdgeInsets.all(10),
              child: FittedBox(
                fit: BoxFit.contain,
                        child: Center(child: Text("✓ POST",style: TextStyle(
                  color: Colors.white,
                  fontSize: 20
                ),)),
              ),
            ),
                    ],
                  ),
                ),
                Container(
                  height: 50.0,
                  decoration: BoxDecoration(
                    //  color: Colors.grey.withOpacity(0.4),
                    borderRadius: BorderRadius.circular(10),
                    
                  ),
                  margin: EdgeInsets.all(10),
                  padding: EdgeInsets.symmetric(horizontal: 10),
                  child: TextField(
                    maxLines: 5,
                    keyboardType: TextInputType.multiline,
                    cursorColor: Colors.black,
                    style: TextStyle(
                      color: Colors.black
                    ),
                    decoration: InputDecoration(
                      border: OutlineInputBorder(borderSide: BorderSide(color: Theme.of(context).accentColor)),
                      focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Theme.of(context).accentColor)),
                      enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Theme.of(context).accentColor )),
                      prefixIcon: Icon(Icons.title),
                      labelText: "Job Title (જોબ શીર્ષક)",
                      labelStyle: GoogleFonts.raleway(color: Colors.black.withOpacity(0.5),fontSize: 20),
                    ),
                  )
                ),
                Container(
                  height: 50.0,
                  decoration: BoxDecoration(
                    //  color: Colors.grey.withOpacity(0.4),
                    borderRadius: BorderRadius.circular(10)
                  ),
                  margin: EdgeInsets.all(10),
                  padding: EdgeInsets.symmetric(horizontal: 10),
                  child: TextField(
                    maxLines: 5,
                    keyboardType: TextInputType.multiline,
                    cursorColor: Colors.black,
                    style: TextStyle(
                      color: Colors.black
                    ),
                    decoration: InputDecoration(
                     border: OutlineInputBorder(borderSide: BorderSide(color: Theme.of(context).accentColor)),
                      focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Theme.of(context).accentColor)),
                      enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Theme.of(context).accentColor )),
                      labelText: "Job Timing (જોબ ટાઇમ)",
                      prefixIcon: Icon(Icons.access_time),
                      labelStyle: GoogleFonts.raleway(color: Colors.black.withOpacity(0.5),fontSize: 20),
                    ),
                  )
                ),
                Container(
                  height: 50.0,
                  decoration: BoxDecoration(
                  //  color: Colors.grey.withOpacity(0.4),
                    borderRadius: BorderRadius.circular(10)
                  ),
                  margin: EdgeInsets.all(10),
                  padding: EdgeInsets.symmetric(horizontal: 10),
                  child: TextField(
                    maxLines: 5,
                    keyboardType: TextInputType.multiline,
                    cursorColor: Colors.black,
                    style: TextStyle(
                      color: Colors.black
                    ),
                    decoration: InputDecoration(
                     border: OutlineInputBorder(borderSide: BorderSide(color: Theme.of(context).accentColor)),
                      focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Theme.of(context).accentColor)),
                      enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Theme.of(context).accentColor )),
                      prefixIcon: Icon(Icons.person_pin_circle),
                      errorBorder: InputBorder.none,
                      disabledBorder: InputBorder.none,
                      labelText: "Job Experience (નોકરી અનુભવ)",
                      labelStyle: GoogleFonts.raleway(color: Colors.black.withOpacity(0.5),fontSize: 18),
                    ),
                  )
                ),
                Container(
                  height: 50.0,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10)
                  ),
                  margin: EdgeInsets.all(10),
                  padding: EdgeInsets.symmetric(horizontal: 10),
                  child: TextField(
                    maxLines: 5,
                    keyboardType: TextInputType.multiline,
                    cursorColor: Colors.black,
                    style: TextStyle(
                      color: Colors.black
                    ),
                    decoration: InputDecoration(
                      border: OutlineInputBorder(borderSide: BorderSide(color: Theme.of(context).accentColor)),
                      focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Theme.of(context).accentColor)),
                      enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Theme.of(context).accentColor )),
                      hintText: "Job Salary(નોકરીનો પગાર)",
                      prefixIcon: Icon(Icons.attach_money),
                      hintStyle: GoogleFonts.raleway(color: Colors.black.withOpacity(0.5),fontSize: 20),
                    ),
                  )
                ),
                Container(
                  height: 100.0,
                  decoration: BoxDecoration(
                    // color: Colors.grey.withOpacity(0.4),
                    borderRadius: BorderRadius.circular(10)
                  ),
                  margin: EdgeInsets.all(10),
                  padding: EdgeInsets.symmetric(horizontal: 10),
                  child: TextField(
                    maxLines: 5,
                    keyboardType: TextInputType.multiline,
                    cursorColor: Colors.black,
                    style: TextStyle(
                      color: Colors.black
                    ),
                    decoration: InputDecoration(
                    border: OutlineInputBorder(borderSide: BorderSide(color: Theme.of(context).accentColor)),
                      focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Theme.of(context).accentColor)),
                      enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Theme.of(context).accentColor )),
                      labelText: "Job Address (જોબ સરનામું)",
                      prefixIcon: Icon(Icons.home),
                      labelStyle: GoogleFonts.raleway(color: Colors.black.withOpacity(0.5),fontSize: 20),
                    ),
                  )
                ),
                Container(
                  height: 100.0,
                  decoration: BoxDecoration(
                    // color: Colors.grey.withOpacity(0.4),
                    borderRadius: BorderRadius.circular(10)
                  ),
                  margin: EdgeInsets.all(10),
                  padding: EdgeInsets.symmetric(horizontal: 10),
                  child: TextField(
                    maxLines: 5,
                    keyboardType: TextInputType.multiline,
                    cursorColor: Colors.black,
                    style: TextStyle(
                      color: Colors.black
                    ),
                    decoration: InputDecoration(
                     border: OutlineInputBorder(borderSide: BorderSide(color: Theme.of(context).accentColor)),
                      focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Theme.of(context).accentColor)),
                      enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Theme.of(context).accentColor )),
                      prefixIcon: Icon(Icons.description),
                      hintText: "Job Description (કામનું વર્ણન)",
                      hintStyle: GoogleFonts.raleway(color: Colors.black.withOpacity(0.5),fontSize: 20),
                    ),
                  )
                ),
                
                ],
              )),
        ),
            ),
          ),
      ),
    );
  }
}

标签： flutterflutter-layoutflutter-dependenciesflutter-animation

Answer 1

我禁用了你的谷歌风格来工作，我认为最好不要使用一些不必要的盒子装饰。另外，我改变了 SingleChildScrollView 的位置，然后给它的子 ListBody。

import 'package:flutter/material.dart';

class VacancyAlert extends StatefulWidget {
  @override
  _VacancyAlertState createState() => _VacancyAlertState();
}

class _VacancyAlertState extends State<VacancyAlert>
    with TickerProviderStateMixin {
  AnimationController controller;
  Animation<double> scaleAnimation;
  TextEditingController News = TextEditingController();

  @override
  void dispose() {
    News.dispose();
    super.dispose();
  }

  @override
  void initState() {
    super.initState();

    controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 450));
    scaleAnimation =
        CurvedAnimation(parent: controller, curve: Curves.elasticInOut);

    controller.addListener(() {
      setState(() {});
    });

    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Center(
        child: ScaleTransition(
          scale: scaleAnimation,
          child: Container(
            margin: EdgeInsets.all(20.0),
            height: 590,
            decoration: ShapeDecoration(
                color: Colors.white,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(15.0))),
            child: SingleChildScrollView(
              child: ListBody(
                children: [
                  Container(
                    height: 50,
                    padding: EdgeInsets.symmetric(horizontal: 15),
                    decoration: BoxDecoration(
                        color: Theme.of(context).accentColor,
                        borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(15),
                            topRight: Radius.circular(15))),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Center(
                          child: Text("Post Job",
                              style:
                                  TextStyle(color: Colors.white, fontSize: 20)),
                        ),
                        Container(
                          height: 40,
                          width: MediaQuery.of(context).size.width / 5 + 10,
                          decoration: BoxDecoration(
                              color: Theme.of(context).accentColor,
                              boxShadow: [
                                BoxShadow(
                                    color: Theme.of(context)
                                        .focusColor
                                        .withOpacity(1.0),
                                    blurRadius: 15,
                                    offset: Offset(0, 5)),
                                BoxShadow(
                                    color: Theme.of(context)
                                        .accentColor
                                        .withOpacity(0.3),
                                    blurRadius: 15,
                                    offset: Offset(0, 5)),
                              ],
                              borderRadius: BorderRadius.circular(15)),
                          padding: EdgeInsets.all(10),
                          child: FittedBox(
                            fit: BoxFit.contain,
                            child: Center(
                                child: Text(
                              "✓ POST",
                              style:
                                  TextStyle(color: Colors.white, fontSize: 20),
                            )),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Container(
                      margin: EdgeInsets.all(10),
                      padding: EdgeInsets.symmetric(horizontal: 10),
                      child: TextField(
                        maxLines: 1,
                        keyboardType: TextInputType.multiline,
                        cursorColor: Colors.black,
                        style: TextStyle(color: Colors.black),
                        decoration: InputDecoration(
                          border: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Theme.of(context).accentColor)),
                          focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Theme.of(context).accentColor)),
                          enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Theme.of(context).accentColor)),
                          prefixIcon: Icon(Icons.title),
                          labelText: "Job Title (જોબ શીર્ષક)",
                        ),
                      )),
                  Container(
                      margin: EdgeInsets.all(10),
                      padding: EdgeInsets.symmetric(horizontal: 10),
                      child: TextField(
                        maxLines: 1,
                        keyboardType: TextInputType.multiline,
                        cursorColor: Colors.black,
                        style: TextStyle(color: Colors.black),
                        decoration: InputDecoration(
                          border: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Theme.of(context).accentColor)),
                          focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Theme.of(context).accentColor)),
                          enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Theme.of(context).accentColor)),
                          labelText: "Job Timing (જોબ ટાઇમ)",
                          prefixIcon: Icon(Icons.access_time),
                        ),
                      )),
                  Container(
                      margin: EdgeInsets.all(10),
                      padding: EdgeInsets.symmetric(horizontal: 10),
                      child: TextField(
                        maxLines: 1,
                        keyboardType: TextInputType.multiline,
                        cursorColor: Colors.black,
                        style: TextStyle(color: Colors.black),
                        decoration: InputDecoration(
                          border: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Theme.of(context).accentColor)),
                          focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Theme.of(context).accentColor)),
                          enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Theme.of(context).accentColor)),
                          prefixIcon: Icon(Icons.person_pin_circle),
                          errorBorder: InputBorder.none,
                          disabledBorder: InputBorder.none,
                          labelText: "Job Experience (નોકરી અનુભવ)",
                        ),
                      )),
                  Container(
                      margin: EdgeInsets.all(10),
                      padding: EdgeInsets.symmetric(horizontal: 10),
                      child: TextField(
                        maxLines: 1,
                        keyboardType: TextInputType.multiline,
                        cursorColor: Colors.black,
                        style: TextStyle(color: Colors.black),
                        decoration: InputDecoration(
                          border: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Theme.of(context).accentColor)),
                          focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Theme.of(context).accentColor)),
                          enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Theme.of(context).accentColor)),
                          hintText: "Job Salary(નોકરીનો પગાર)",
                          prefixIcon: Icon(Icons.attach_money),
                        ),
                      )),
                  Container(
                      margin: EdgeInsets.all(10),
                      padding: EdgeInsets.symmetric(horizontal: 10),
                      child: TextField(
                        maxLines: 5,
                        keyboardType: TextInputType.multiline,
                        cursorColor: Colors.black,
                        style: TextStyle(color: Colors.black),
                        decoration: InputDecoration(
                          border: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Theme.of(context).accentColor)),
                          focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Theme.of(context).accentColor)),
                          enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Theme.of(context).accentColor)),
                          labelText: "Job Address (જોબ સરનામું)",
                          prefixIcon: Icon(Icons.home),
                        ),
                      )),
                  Container(
                      margin: EdgeInsets.all(10),
                      padding: EdgeInsets.symmetric(horizontal: 10),
                      child: TextField(
                        maxLines: 5,
                        keyboardType: TextInputType.multiline,
                        cursorColor: Colors.black,
                        style: TextStyle(color: Colors.black),
                        decoration: InputDecoration(
                          border: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Theme.of(context).accentColor)),
                          focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Theme.of(context).accentColor)),
                          enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Theme.of(context).accentColor)),
                          prefixIcon: Icon(Icons.description),
                          hintText: "Job Description (કામનું વર્ણન)",
                        ),
                      )),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}