代码之家 › 专栏 › 技术社区 › Black

将行固定到其他UI小部件顶部的滚动视图底部

flutter-layout flutter

Black · 技术社区 · 5 年前

我在试着钉一个钉子 Row 容器中有文本字段输入和相邻图标按钮 ScrollView .不幸的是 一行 将停留在底部,但不在屏幕视图中,因此用户必须向下滚动才能看到屏幕 一行 容器如何将底部栏固定到屏幕上,使其始终位于屏幕视图的底部,并位于屏幕中其他对象的顶部 卷轴视图 ?

酒吧用户界面:

class TextBarAtBottom extends StatelessWidget {
  TextEditingController commentController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Row(children: [
      // First child is TextInput
      Expanded(
          child: Container(
            child: TextFormField(
              autocorrect: false,
              decoration: new InputDecoration(
                labelText: "Some Text",
                labelStyle: TextStyle(fontSize: 16.0, color: Colors.black),
                fillColor: Colors.black,
                border: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.black)),
              ),
            ),
          )),
      // Second child is button
      IconButton(
        icon: Icon(Icons.send),
        iconSize: 16.0,
        onPressed: () {},
      )
    ]);
  }
}

屏幕用户界面:

@override
Widget build(BuildContext context) {
  return MaterialApp(
        title: 'App',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text('App'),
            ),
            body: SingleChildScrollView(
                child: Column(mainAxisSize: MainAxisSize.min, children: [
              Flexible(
                  fit: FlexFit.loose,
                  child: ExpandableTheme(
                      data: ExpandableThemeData(
                          iconColor: Colors.blue,
                          useInkWell: true,
                          animationDuration: const Duration(milliseconds: 500),
                          tapBodyToExpand: true,
                          tapHeaderToExpand: true,
                          tapBodyToCollapse: true,
                          hasIcon: true,
                          iconPlacement: ExpandablePanelIconPlacement.right),
                      child: ExpandablePanel(
                          header: Text(widget.postData.title,
                              style: TextStyle(fontSize: 24)),
                          collapsed: Text(widget.postData.text,
                              style: TextStyle(fontSize: 16),
                              softWrap: true,
                              maxLines: 10,
                              overflow: TextOverflow.ellipsis),
                          expanded: Text(widget.postData.text,
                              style: TextStyle(fontSize: 16),
                              softWrap: true)))),
              // Second child is spacing
              SizedBox(height: 16),
              // Third child is list view of Cards that are populated from the request post
              Flexible(
                  fit: FlexFit.loose,
                  child: Container(
                    child: FutureBuilder<Map<String, String>>(
                      future: post,
                      builder: (context, snapshot) {
                        if (snapshot.hasData) {
                          return ListView.builder(
                              shrinkWrap: true,
                              itemCount: snapshot.data.length,
                              itemExtent: 128.0,
                              itemBuilder: (BuildContext context, int index) {
                                return Card(Text('$index'));
                              });
                        } else if (snapshot.hasError) {
                          return Flex(direction: Axis.horizontal, children: [
                            Expanded(
                              child: new Container(),
                            )
                          ]);
                        }
                        return CircularProgressIndicator();
                      },
                    ),
                  )),
              // Fourth child is text bar and send button
              Flexible(fit: FlexFit.loose, child: TextBarAtBottom())
            ]))));
  }

0 回复 | 直到 5 年前

Aamil Silawat 5 年前

检查我的代码,底部有文本字段,中间有滚动视图。

代码的问题是 您正在scrollview中添加Textfield,因此总是在SingleChildScrollview的末尾。

解决方案: 将SingleChildScrollView添加到带有扩展小部件的列视图中。并将文本字段作为第二个子项添加到Column小部件。现在,文本字段将位于底部,其余空间将由SingleChildScrollView占据。

import 'package:flutter/material.dart';

    class Design extends StatefulWidget {
     @override
     _DesignState createState() => _DesignState();
    }

    class _DesignState extends State<Design> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
          title: Text('TextField at Bottom'),
        ),
          body: Column(
            children: <Widget>[
              Expanded(
                child: SingleChildScrollView(
                   child: Column(
                      children: <Widget>[
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                ],
              ),
            ),
          ),
          Row(children: [
            // First child is TextInput
            Expanded(
                child: Container(
              child: TextFormField(
                autocorrect: false,
                decoration: new InputDecoration(
                  labelText: "Some Text",
                  labelStyle: TextStyle(fontSize: 16.0, color: Colors.black),
                  fillColor: Colors.black,
                  border: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.black)),
                ),
              ),
            )),
            // Second child is button
            IconButton(
              icon: Icon(Icons.send),
              iconSize: 16.0,
              onPressed: () {},
            )
          ])
        ],
      ),
    );
    }
   }

Henok 5 年前

截图中的结果如下所示。

1.图片位于列表顶部

2.列表底部的图像

我修改了你自己的代码,如下所示


      MaterialApp(
        title: 'App',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text('Document Thread'),
            ),
            body: Column(
              children: <Widget>[
                Expanded(
                  child: SingleChildScrollView(
                      child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            // First child is ExpandableTheme with minHeight of 0.5 screen but expandable to fill up as much screen as needed
                            Flexible(
                              fit: FlexFit.loose,
                              child: ExpandableTheme(
                                  data: ExpandableThemeData(
                                      iconColor: Colors.blue,
                                      useInkWell: true,
                                      animationDuration: const Duration(milliseconds: 500),
                                      tapBodyToExpand: true,
                                      tapHeaderToExpand: true,
                                      tapBodyToCollapse: true,
                                      hasIcon: true,
                                      iconPlacement: ExpandablePanelIconPlacement.right
                                  ),
                                  child: ExpandablePanel(
                                      header: Text('Title',
                                          style: TextStyle(fontSize: 24)),
                                      collapsed: Text('Some text',
                                          style: TextStyle(fontSize: 16),
                                          softWrap: true,
                                          maxLines: 10,
                                          overflow: TextOverflow.ellipsis),
                                      expanded: Text('widget.postData.docAbstract',
                                          style: TextStyle(fontSize: 16),
                                          softWrap: true)
                                  )
                              ),
                            ),
                            // Second child is spacing
                            SizedBox(height: 16),
                            // Third child is max height of 0.5 screen with ListView of Card objects or Empty container
                            Flexible(
                              fit: FlexFit.loose,
                              child: Container(
                                //this is limiting your list not to scroll to the bottom
//                        constraints: BoxConstraints(
//                          minWidth: MediaQuery.of(context).size.width,
//                          maxHeight: MediaQuery.of(context).size.height / 2,
//                        ),
                                child: ListView.builder(
                                  shrinkWrap: true,
                                  itemCount: 15,
                                  physics: NeverScrollableScrollPhysics(),
                                  itemBuilder: (BuildContext context, int index) {
                                    return Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: <Widget>[
                                        Padding(
                                          padding: const EdgeInsets.fromLTRB(90,0,0,10),
                                          child: Text('Text $index'),
                                        ),
                                        Row(
                                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                                          children: <Widget>[
                                            IconButton(
                                              icon: Icon(Icons.thumb_up, color: Colors.green,),
                                              onPressed: (){},
                                            ),
                                            IconButton(
                                              icon: Icon(Icons.thumb_down, color: Colors.red,),
                                              onPressed: (){},
                                            )
                                          ],
                                        ),
                                        Divider(color: Colors.black12,)
                                      ],
                                    );
                                   },

                                ),
                              ),
                            ),
                            // Fourth child is text bar and send button
                          ]
                      )
                  ),
                ),
                TextBarAtBottom()

              ],
            )
        )
      );