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,
      ),
    );
  }
}

如果删除标题参数，则该小部件将按预期工作。为什么它不随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,
  });
}

希望它会有所帮助：）

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

1 个答案: