标签: flutter-layout

我在网格视图中添加了一个标题。标题正在滚动，但在触摸网格视图时。它没有滚动。我想滚动标题和网格视图。我用过SingleChildScrollView和Expanded。如何解决请帮帮我。

我的代码如下所示

Widget ItemGridview() {
    return Container(
        color: Colors.white,
    padding: EdgeInsets.all(10),
    child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
            new Expanded(
            child: SingleChildScrollView(
            child: Column(
                children: <Widget>[
                new Text(
            'Items of products',
            style: TextStyle(fontWeight: FontWeight.w700, fontSize: 18.0),
            textAlign: TextAlign.left,
        ),
                GridView.count(
            shrinkWrap: true,
            primary: true,
            padding: EdgeInsets.only(top:15.0),
            crossAxisCount: 3,
            childAspectRatio: 0.60, //1.0
            mainAxisSpacing: 0.2, //1.0
            crossAxisSpacing: 4.0, //1.0
            children: createCategoryList(),
            ),
                ],
            ),
            )
        )
        ]
    ),
    );
}

在我的代码中，产品项是标题。

List<Widget> createCategoryList() {

  List<Widget> …

我正在尝试使用底部的浮动操作按钮创建一个简单的待办事项应用程序，单击该按钮时会显示警报对话框以将项目添加到列表中。每次单击按钮时，键盘都会向上推操作按钮，导致错误溢出。有没有办法避免在键盘打开时向上推操作按钮？这是我拍摄的快照： 源代码下方的快照：

import 'package:flutter/material.dart';
import '../model/todo_item.dart';

class ToDoScreen extends StatefulWidget {
  @override
  _ToDoScreenState createState() => _ToDoScreenState();
}

class _ToDoScreenState extends State<ToDoScreen> {
  TextEditingController _textEditingController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueAccent,
      body: Column(
        children: <Widget>[ToDoItem("Going for a Walk", "12 January, 2019")],
      ),
      floatingActionButton: FloatingActionButton(
        tooltip: 'Add Item',
        child: Icon(Icons.add),
        backgroundColor: Colors.red,
        onPressed: _showFormDialog,
      ),
    );
  }

  void _showFormDialog() {
    var alert = AlertDialog(
      content: Row(
        children: <Widget>[
          Expanded(
            child: TextField(
              controller: _textEditingController,
              autofocus: true, …

showModalBottomSheet不提供任何样式或装饰.我想创建类似Google Tasks底片的内容.

我有一个带有大量不同视图的TabBarView().我希望它们是一个顶部有TextField的列,下面是ListView.Builder(),但两个小部件应该在同一个可滚动区域(scrollview).我实现它的方式引发了一些错误:

@override
Widget build(BuildContext context) {
return new Column(
  mainAxisAlignment: MainAxisAlignment.center,
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[
      new Padding(
          padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
          child: new TextField(
            decoration: new InputDecoration(
                hintText: "Type in here!"
            ),
          )
      ),
      new ListView.builder(
          itemCount: _posts.length, itemBuilder: _postBuilder)
    ],
   );
}

错误:

I/flutter (23520): The following assertion was thrown during performResize():
I/flutter (23520): Vertical viewport was given unbounded height.
I/flutter (23520): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter (23520): …

最近 Flutter 的更新似乎改变了 BottomNavigationBar 的行为。以前，当键盘出现时，键盘会覆盖BottomNavigationBar。但是，现在，BottomNavigationBar 出现时会粘在键盘的顶部并且始终可见。

当键盘出现时，如何将BottomNavigationBar 设置为保留在键盘下方？

  bottomNavigationBar: new BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      fixedColor: Colors.blue,
      onTap: _navigationTapped,
      currentIndex: _pageIndex,
      items: [
        new BottomNavigationBarItem(icon: new Icon(Icons.apps), title: new Text("Manage")),
        new BottomNavigationBarItem(icon: new Icon(Icons.multiline_chart), title: new Text("A")),
        new BottomNavigationBarItem(icon: new Icon(Icons.check_box), title: new Text("B")),
        new BottomNavigationBarItem(icon: new Icon(Icons.person_add), title: new Text("C")),
        new BottomNavigationBarItem(icon: new Icon(Icons.border_color), title: new Text("D")),
      ]
  ),

我来自 Web 开发背景，并且习惯于能够创建一个同时具有 x 和 y 溢出的元素（允许向任何方向滚动）。我正在努力使用 Flutter 实现相同的功能。

查看文档，我找到了 SingleChildScrollView，但它只允许 Axis.horizo​​ntal 或 Axis.vertical，而不是两者。

所以我尝试了以下方法：

return SingleChildScrollView( // horizontal scroll widget
    scrollDirection: Axis.horizontal,
        child: SingleChildScrollView( // vertical scroll widget
            scrollDirection: Axis.vertical,
            child: ...content of the container etc...
        )
    );

这适用于 x 和 y，但它不允许对角滚动。

有没有办法实现对角滚动，或者有没有更好的材料小部件，我完全没有？

谢谢

我有一个带有一组扩展小部件的列。

有没有办法控制它们扩展的范围？我希望一个小部件仅扩展到特定大小，并使其余小部件可用于其他小部件。

编辑：

因为我得到了两个可能具有误导性的答案，所以我想澄清一下。我想要这样的东西：

Expanded(flex: 1, minSize: 50, maxSize: 200, child: ...)

这意味着这个展开的小部件的 flex 为 1，但不应小于 50 和大于 200。

如何删除TextFormField验证器创建的错误消息？我只想要红色边框，因为我没有空间来显示错误。

bool error = false;
 TextFormField ( 
      hintText:error?'please input productName':'',
      hintStyle:TextStyle(color: Colors.red), 
      validator:(v){  
       v.trim().length>0?error=false:error=true; return null; 
      }
 ) 

我正在尝试自定义颤动时 RaisedButton 阴影的颜色，例如绿色而不是灰色，我不想像互联网上的所有解决方案一样将按钮放在容器中，所以我希望有一个使用高程和“android材料”不可能做到这一点的旧答案不再是问题。

已编辑：使用 ShadowBox 解决方案的容器的问题是，由于偏移量只有两个值，垂直和水平，因此将向所有侧面展开，如果我们推动 ShadowBox 使其仅在一侧，则在一侧但它是会很大（按钮高度的一半）！

因此，如果有一种方法可以使 child(RaisedButton) 大于容器，那么这将是一个解决方案。

我正在尝试使用 Stack(..Positioned(..)) 但到目前为止没有运气。

顺便说一句，这是我需要一个原生但彩色阴影的按钮。

RaisedButton(
   padding: EdgeInsets.symmetric(vertical: 15.0),
   shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(30.0)
   ),
   color: Theme.of(context).primaryColor,
   onPressed: () => print('Hello'),
   child: Center(Text(...)),
),  

我只想要底部的阴影与按钮的颜色相同：

但到目前为止我得到了什么：

谢谢

我正在尝试以编程方式将此哈希颜色代码 #159424 (GREEN-COLOR) 转换为更暗和更亮。如何做到这一点，请帮忙？

使绿色变深

toDarkColor(String hashColor){
  // how to convert that hash string to make green color darker?
}

使绿色更亮

toLightColor(String hashColor){
  // how to convert that hash string to make green color lighter? 
}