带有 TextField 的 Flutter SlidingUpPanel 小部件不起作用

Question

我正在使用 here 记录的 SlidingUpPanel 小部件。

当我使用 header 属性并将其设置为 TextField 小部件时，面板不再上下滑动，而是保持折叠状态。

页面的完整代码如下：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';

class HomePage extends StatefulWidget {

  HomePage();

  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {

  _HomePageState();

  Widget _buildSuggestions() {
    List<myObject> myObjects = _getRecentmyObjects();
    return new ListView.builder(
        itemCount: myObjects.length,
        itemBuilder: (context, index) {
          return Card(
            elevation: 2,
            child: ListTile(
              title: Text(myObjects[index].firstLine),
              subtitle: Text(
                myObjects[index].secondLine + "," + myObjects[index].thirdLine,
                maxLines: 2,
              ),
            ),
          );
        });
  }

  List<myObject> _getmyObjects() {
    return [
      new myObject(
          firstLine: "This is",
          secondLine: "one element ",
          thirdLine: "of a list of items",
          aNumber: "00000"),
      new myObject(
          firstLine: "This is a",
          secondLine: "second element of a list",
          thirdLine: "",
          aNumber: "00000"),
      new myObject(
          firstLine: "And a ", secondLine: "Third", thirdLine: "", aNumber: "000"),
    ];
  }

  PanelController _panelController = new PanelController();

  @override
  Widget build(BuildContext context) {
    BorderRadiusGeometry radius = BorderRadius.only(
      topLeft: Radius.circular(24.0),
      topRight: Radius.circular(24.0),
    );
    return Scaffold(
      body: SlidingUpPanel(
        controller: _panelController,
        minHeight: 80,
        header:  new TextField(),
        panel:
         child: Container(
            padding: const EdgeInsets.only(top: 0),
            child: Center(
              child: _buildSuggestions(),
            ),
          ),
        ]),
        body: Container(),
        borderRadius: radius,
      ),
    );
  }
}

如果我删除 header 参数，小部件将按预期工作。 为什么它不会与 TextField 一起滑动？

Answer 1

header 是一个可选的持久小部件，它浮动在 [panel] 上方并附加到 [panel] 的顶部。

我想你正在寻找这样的东西

要实现这一点，您可以使用

Column[TextField, Flexible(child:ListView())]

查看下面的代码。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  HomePage();

  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  _HomePageState();

  Widget _buildSuggestions() {
    List<MyObject> myObjects = _getmyObjects();
    return new ListView.builder(
        itemCount: myObjects.length,
        itemBuilder: (context, index) {
          return Card(
            elevation: 2,
            child: ListTile(
              title: Text(myObjects[index].firstLine),
              subtitle: Text(
                myObjects[index].secondLine + "," + myObjects[index].thirdLine,
                maxLines: 2,
              ),
            ),
          );
        });
  }

  List<MyObject> _getmyObjects() {
    return [
      new MyObject(firstLine: "This is", secondLine: "one element ", thirdLine: "of a list of items", aNumber: "00000"),
      new MyObject(firstLine: "This is a", secondLine: "second element of a list", thirdLine: "", aNumber: "00000"),
      new MyObject(firstLine: "And a ", secondLine: "Third", thirdLine: "", aNumber: "000"),
    ];
  }

  PanelController _panelController = new PanelController();

  @override
  Widget build(BuildContext context) {
    BorderRadiusGeometry radius = BorderRadius.only(
      topLeft: Radius.circular(24.0),
      topRight: Radius.circular(24.0),
    );
    return Scaffold(
      appBar: AppBar(),
      body: SlidingUpPanel(
        borderRadius: radius,
        controller: _panelController,
        minHeight: 80,
        body: Placeholder(),
        panel: Container(
          padding: EdgeInsets.all(20.0),
          child: Column(
            children: <Widget>[
              TextField(
                decoration: InputDecoration(
                  labelText: "Search",
                ),
              ),
              Flexible(
                child: _buildSuggestions(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class MyObject {
  String firstLine;
  String secondLine;
  String thirdLine;
  String aNumber;

  MyObject({
    this.firstLine,
    this.secondLine,
    this.thirdLine,
    this.aNumber,
  });
}

希望对你有帮助:)