android - 堆栈中的 ListView

Question

因为我的页面内容溢出，我尝试使 Widget contentArea() [在我的代码中] 可滚动，以便它 overflow hidden 部分。

已经尝试用 SingleChildScrollView 和 ListView 包装。但是报错。

这就是我在下面的设计中试图实现的。

import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';

class CreateEventScreen extends StatefulWidget {
  _CreateEventScreenState createState() => new _CreateEventScreenState();
}

class _CreateEventScreenState extends State<CreateEventScreen> {
  TextEditingController judulEventCtr = TextEditingController();
  List<Map<int, String>> listCountry = List<Map<int, String>>();

  @override
  void initState() {
    super.initState();
    listCountry.add({1: 'Indonesia'});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Container(
        color: Colors.pink,
        child: Stack(
          children: <Widget>[
            new Column(
              children: <Widget>[pinkArea(), contentArea()],
            ),
            progress()
          ],
        ),
      )),
    );
  }

  Widget contentArea() {
    return new Container(
        // height: 100,
        width: MediaQuery.of(context).size.width,
        // color: Colors.yellow,
        decoration: new BoxDecoration(
            color: Colors.white,
            borderRadius: new BorderRadius.only(
                topLeft: const Radius.circular(10.0),
                topRight: const Radius.circular(10.0))),
        child: Padding(
            padding: const EdgeInsets.only(top: 60, left: 20, right: 20),
            child: Container(
              // color: Colors.yellowAccent,
              width: 200,
              child: Column(
                // mainAxisAlignment: MainAxisAlignment.start,
                // crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    '1. Detail Event',
                    style: TextStyle(
                        color: Colors.pink, fontWeight: FontWeight.bold),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Text(
                      'Jelaskan sedikit tentang acaramu sehingga orang-orang akan tertarik.',
                      style: TextStyle(
                          color: Colors.grey, fontWeight: FontWeight.bold)),
                  SizedBox(
                    height: 10,
                  ),
                  textField('Judul Event', 'Judul Event', judulEventCtr),
                  SizedBox(
                    height: 10,
                  ),
                  dropDown('Kategori', 'Select a category', listCountry),
                  SizedBox(
                    height: 10,
                  ),
                  textField('Judul Acara', 'Judul Acara', judulEventCtr),
                  SizedBox(
                    height: 10,
                  ),
                  textField(
                      'Deskripsi Acara', 'Deskripsi Acara', judulEventCtr),
                  SizedBox(
                    height: 10,
                  ),
                  textField(
                      'Apa yang perlu pengunjung lakukan di acara mu?',
                      'Tuliskan brief singkat untuk para pengunjung acaramu',
                      judulEventCtr),
                  SizedBox(
                    height: 10,
                  ),
                  textField(
                      'Hal yang dilarang?',
                      'Jelaskan secara singkat hal-hal yang perlu dihindarkan',
                      judulEventCtr),
                  SizedBox(
                    height: 10,
                  ),
                  textField(
                      'Keuntungan dan fasilitas',
                      'Hal apa saja yang dapat dinikmati para pengunjung?',
                      judulEventCtr),
                  SizedBox(
                    height: 10,
                  ),
                  textField(
                      'Website Acara', 'youreventsite.com', judulEventCtr),
                  SizedBox(
                    height: 10,
                  ),
                  textField(
                      'Contact Person', 'Contact Person Name', judulEventCtr),
                ],
              ),
            )));
  }

  Widget pinkArea() {
    return new Container(
      height: 100,
      color: Colors.pink,
      child: Padding(
        padding: const EdgeInsets.only(left: 20, right: 20),
        child: Container(
          height: 100,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text(
                    '<',
                    style: TextStyle(color: Colors.white),
                  ),
                  Text(
                    'Create Event',
                    style: TextStyle(color: Colors.white),
                  )
                ],
              ),
              Row(
                children: <Widget>[
                  Text(
                    '<',
                    style: TextStyle(color: Colors.white),
                  ),
                  Text(
                    'Create Event',
                    style: TextStyle(color: Colors.white),
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }

  Widget textField(String title, String hint, TextEditingController ctr) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          title,
          textAlign: TextAlign.left,
          style: TextStyle(fontSize: 10, fontWeight: FontWeight.bold),
        ),
        TextField(
          controller: ctr,
          decoration: InputDecoration(
            hintText: hint,
            hintStyle: TextStyle(fontSize: 12),
            enabledBorder: const UnderlineInputBorder(
              borderSide: const BorderSide(color: Colors.pink, width: 0.0),
            ),
          ),
        )
      ],
    );
  }

  Widget dropDown(
      String title, String hint, List<Map<int, String>> listCountry) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          title,
          textAlign: TextAlign.left,
          style: TextStyle(fontSize: 10, fontWeight: FontWeight.bold),
        ),
        DropdownButton<int>(
          isExpanded: true,
          items: listCountry.map((Map<int, String> a) {
            return new DropdownMenuItem<int>(
              value: a.keys.first,
              child: new Text(a.values.first),
            );
          }).toList(),
          value: 1,
          onChanged: (_) {
            setState(() {
              // country = _;
            });
          },
          style: TextStyle(color: Colors.black),
          hint: Text(
            hint,
            style: TextStyle(color: Colors.grey, fontWeight: FontWeight.bold),
          ),
        ),
      ],
    );
  }

  // Widget filePicker() {
  //   return Row(children: <Widget>[

  //   ],);
  // }

  Widget step(String title, String subtitle) {
    return Container(
      height: 100,
      width: 65,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          FittedBox(
              child: Padding(
            padding: const EdgeInsets.only(top: 2, right: 3),
            child: Container(
              // color: Colors.yellow,
              height: 8, width: 8,
              decoration: new BoxDecoration(
                  color: Colors.yellow,
                  borderRadius: new BorderRadius.all(Radius.circular(4))),
            ),
          )),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  title,
                  style: TextStyle(
                      color: Colors.pink,
                      fontSize: 11,
                      fontWeight: FontWeight.bold),
                ),
                Text(
                  subtitle,
                  style: TextStyle(fontSize: 10, fontWeight: FontWeight.bold),
                )
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget progress() {
    return Positioned(
      child: Container(
        width: MediaQuery.of(context).size.width,
        alignment: Alignment(0.0, 0.0),
        child: Container(
            width: MediaQuery.of(context).size.width * 0.9,
            height: 80,
            decoration: new BoxDecoration(
              color: Colors.white,
              borderRadius: new BorderRadius.all(Radius.circular(15)),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey,
                  blurRadius: 5.0, // has the effect of softening the shadow
                  spreadRadius: 1.0, // has the effect of extending the shadow
                  offset: Offset(
                    2.0, // horizontal, move right 10
                    3.0, // vertical, move down 10
                  ),
                )
              ],
            ),
            child: Padding(
              padding: const EdgeInsets.all(13),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  step('Step 1', 'Event Details'),
                  step('Step 2', 'Budget & Requirement'),
                  step('Step 3', 'Promotion Types'),
                  step('Step 4', 'Summary & Preview'),
                ],
              ),
            )),
      ),
      top: 50,
    );
  }
}

有人试过这个设计吗？或者对其他方法有什么建议？

Answer 1

问题似乎是您没有在整个小部件中允许扩展/弹性属性的范围。这是导致溢出问题的原因。

您需要做的是用 SingleChildScrollView 包裹 contentArea() 小部件的子项，然后用 Expanded 小部件包裹 ScrollView .如下所示:

  Widget contentArea() {
    return Expanded(
      child: SingleChildScrollView(
       child: your_existing_widget...
      ),
    );
  }