在 flutter 中使用帶有列的擴展小部件

Question

我試圖在 Column 中使用 Expanded 小部件，我嘗試了各種方法，但似乎沒有任何效果！

到目前為止，我已經成功構建了這個：

圖片

但正如它所顯示的那樣，我放在 Expanded 小部件中的列表視圖位於其他小部件下方，（並且展開的小部件正在滾動，但頂部的小部件處於固定位置），我試圖將展開的小部件放在另一列中，並且還嘗試將兩者放入單獨的擴展小部件中，但似乎沒有任何效果，

我真的很感謝你的幫助

這是我生成上面圖像的代碼：

import 'package:fluapp/constants.dart';
import 'package:fluapp/models/music_model.dart';
import 'package:fluapp/widgets/custom_button_widget.dart';
import 'package:fluapp/widgets/custom_progress_widget.dart';
import 'package:flutter/material.dart';

class PlayerPage extends StatefulWidget {
  @override
  _PlayerPageState createState() => _PlayerPageState();
}

class _PlayerPageState extends State<PlayerPage>
    with SingleTickerProviderStateMixin {
  List<MusicModel> _list;
  int _playid;
  var _value;
  AnimationController _controller;
  var isPlay;
  @override
  void initState() {
    _playid = 3;
    _list = MusicModel.list;
    _value = 0.0;
    _controller =
    AnimationController(vsync: this, duration: Duration(milliseconds: 250));
    isPlay = true;
    super.initState();
  }

  Widget build(BuildContext context) {
    return Scaffold(
  backgroundColor: AppColors.mainColor,
  body: Column(
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.all(12),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            CustomButtonWidget(
              size: 50,
              onTap: () {
                Navigator.of(context).pop();
              },
              child: Icon(
                Icons.arrow_back,
                color: AppColors.styleColor,
              ),
            ),
            Text("PLAYING NOW",
                style: TextStyle(
                  color: AppColors.styleColor,
                  fontWeight: FontWeight.bold,
                )),
            CustomButtonWidget(
              size: 50,
              onTap: () {},
              child: Icon(
                Icons.menu,
                color: AppColors.styleColor,
              ),
            ),
          ],
        ),
      ),
      CustomButtonWidget(
        image: "assets/logo.jpg",
        size: MediaQuery.of(context).size.width * .7,
        borderWidth: 5,
        onTap: () {},
      ),
      Text(
        "Flume",
        style: TextStyle(
          color: AppColors.styleColor,
          fontSize: 32,
          fontWeight: FontWeight.bold,
          height: 2,
        ),
      ),
      Text(
        "Flume kucha",
        style: TextStyle(
          color: AppColors.styleColor.withAlpha(90),
          fontSize: 16,
          fontWeight: FontWeight.bold,
        ),
      ),
      Expanded(child: SizedBox()),
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 24),
        child: customProgressWidget(
          value: _value,
          labelStart: "1:21",
          labelEnd: "3:46",
        ),
      ),
      Expanded(child: SizedBox()),
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 42),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            CustomButtonWidget(
              size: 80,
              onTap: () {
                setState(() {
                  if (_value > .1) {
                    _value -= .1;
                  }
                });
              },
              child: Icon(
                Icons.fast_rewind,
                color: AppColors.styleColor,
              ),
              borderWidth: 5,
            ),
            CustomButtonWidget(
              size: 80,
              onTap: () {
                if (_controller.value == 0.0) {
                  _controller.forward();
                  setState(() {
                    isPlay = false;
                  });
                } else {
                  _controller.reverse();
                  setState(() {
                    isPlay = true;
                  });
                }
              },
              child: AnimatedIcon(
                icon: AnimatedIcons.pause_play,
                progress: _controller,
                color: isPlay ? Colors.white : AppColors.styleColor,
              ),
              borderWidth: 5,
              isActive: isPlay,
            ),
            CustomButtonWidget(
              size: 80,
              onTap: () {
                setState(() {
                  if (_value < .9) {
                    _value += .1;
                  }
                });
              },
              child: Icon(
                Icons.fast_forward,
                color: AppColors.styleColor,
              ),
              borderWidth: 5,
            ),
          ],
        ),
      ),
      SizedBox(height: 25),
//to here

      Expanded(
        child: ListView.builder(
          itemCount: _list.length,
          padding: EdgeInsets.all(5),
          itemBuilder: (context, index) {
            return GestureDetector(
              onTap: () {
                setState(() {
                  _playid = _list[index].id;
                });
              },
              child: Container(
                decoration: BoxDecoration(
                  color: _list[index].id == _playid
                      ? AppColors.activeColor
                      : AppColors.mainColor,
                  borderRadius: BorderRadius.all(
                    Radius.circular(20),
                  ),
                ),
                padding: EdgeInsets.all(16),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          _list[index].title,
                          style: TextStyle(
                            color: AppColors.styleColor,
                            fontSize: 16,
                          ),
                        ),
                        Text(
                          _list[index].album,
                          style: TextStyle(
                            color: AppColors.styleColor.withAlpha(90),
                            fontSize: 16,
                          ),
                        ),
                      ],
                    ),
                    CustomButtonWidget(
                      child: Icon(
                        _list[index].id == _playid
                            ? Icons.pause
                            : Icons.play_arrow,
                        color: _list[index].id == _playid
                            ? Colors.white
                            : AppColors.styleColor,
                      ),
                      size: 50,
                      isActive: _list[index].id == _playid,
                      onTap: () {
                        setState(() {
                          _playid = _list[index].id;
                        });
                      },
                    ),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    ],
  ),
);

} }

Answer 1

目前，您的外欄決定沒有滾動行為。 您可以用SingleChildScrollable將其包裝起來，但隨后您將面臨非靈活區域中靈活子項的問題。 保持靈活布局的一種解決方案是使用 MediaQuery 並將一個大框定義為您的靈活區域：

return Scaffold(
  body: ListView(
    children: [
      SizedBox(
        height: MediaQuery.of(context).size.height - 100,
        child: Column(
          children: [
            // Your flexible media player widgets
          ],
        ),
      ),
      ListView.builder(
        shrinkWrap: true,
        primary: false,
        itemCount: 10,
        itemBuilder: (_, __) {
          return ListTile(
            title: Text('song title'),
          );
        },
      ),
    ],
  ),
);