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

问题描述 投票:2回答:1

[我正在尝试固定Row容器,该容器具有文本字段输入和ScrollView中的相邻图标按钮。不幸的是,Row将停留在底部,但不会出现在屏幕视图中,因此用户必须向下滚动才能看到Row容器。如何将底部栏固定在屏幕上,以使其始终位于屏幕视图的底部,并且位于ScrollView中其他对象的顶部?

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

  @override
  Widget build(BuildContext context) {
    return new Align(
        alignment: Alignment.bottomCenter,
        child: Container(
            padding: EdgeInsets.symmetric(vertical: 2.0),
            child: 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.max,
              children: [
              // First child is ExpandableTheme with minHeight of 0.5 screen but expandable to fill up as much screen as needed
              ExpandableTheme(...)
              ),
              // Second child is spacing
              SizedBox(height: 16),
              // Third child is max height of 0.5 screen with ListView of Card objects or Empty container
              Container(
                constraints: BoxConstraints(
                  minWidth: MediaQuery.of(context).size.width,
                  maxHeight: MediaQuery.of(context).size.height / 2,
                ),
                child: FutureBuilder<Map<Comment, int>>(
                  future: post,
                  builder: (context, snapshot) {
                    if (snapshot.hasData) {
                      return ListView.builder(...);
                    } else if (snapshot.hasError) {
                      return Flex(
                                direction: Axis.horizontal,
                                children: [Expanded(child: new Container(),)]);
                    }
                    return CircularProgressIndicator();
                  },
                ),
              ),
              // Fourth child is text bar and send button
              TextBarAtBottom()
            ]))));
  }
flutter flutter-layout
1个回答
0
投票
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'),
            ],
          ),
        ),
      ),
      TextField(
        decoration: InputDecoration(hintText: 'Text Field at Bottom'),
      )
    ],
  ),
);

}}

© www.soinside.com 2019 - 2024. All rights reserved.