Flutter: boxdecoration 隐藏图标按钮的波纹,渲染顺序对吗?

创建于 2017-10-25  ·  3评论  ·  资料来源: flutter/flutter

重现步骤

按照页面https://codelabs.developers.google.com/codelabs/flutter/index.html#5

我的代码是:

```
小部件 _setupBody() {
返回新列(
孩子们:[
新扩展(
孩子:新的ListView.builder(
itemBuilder: (_nothing, int index) => _messageList[index],
反向:真,
itemCount:_messageList.length,
),
),
新分频器(高度:1.0),
新容器(
填充:const EdgeInsets.symmetric(水平:5.0),
//decoration: new BoxDecoration(color: Theme.of(context).cardColor,),
孩子:新行(
孩子们:[
新灵活(
孩子:新的文本字段(
最大线数:1,
控制器:_myController,
onSubmitted: _handleSubmitt,
装饰:新 InputDecoration.collapsed(hintText: "input here"),
),
),
新图标主题(
数据:新 IconThemeData(颜色:Theme.of(context).accentColor),
孩子:新图标按钮(图标:新图标(图标.send),onPressed:()=> _handleSubmitt(_myController.text)))
],
))
],
);
}

then it shown like this: 
![screenflow](https://user-images.githubusercontent.com/3993323/31986228-425b9d68-b92d-11e7-8176-de3deab993c2.gif)

after add the decoration  (uncomment the line 14)

![screenflow2](https://user-images.githubusercontent.com/3993323/31986425-0dcfe8b4-b92e-11e7-90ae-52664835cd4b.gif)

as you see, the boxdecoration hide the ripple.

from the code , i think , the boxdexcoration should be rendered first. 

How to change the code makes the ripple at front of the boxdexcoration?



## Flutter Doctor

[✓] Flutter(在 Mac OS X 10.12.4 16E​​195 上,语言环境 zh-Hans-CN,通道 alpha)
• Flutter 在 /Users/cjz/ALL_IN_THIS/flutter
• 框架修订e8aa40eddd(7天前),2017-10-17 15:42:40 -0700
• 引擎修订版 7c4142808c
• 工具 Dart 版本 1.25.0-dev.11.0

[✓] Android 工具链 - 为 Android 设备开发 (Android SDK 26.0.2)
• Android SDK 位于 /Users/cjz/ALL_IN_THIS/Android/sdk
• 平台 android-26,构建工具 26.0.2
• ANDROID_HOME = /Users/cjz/ALL_IN_THIS/Android/sdk
• Java 二进制文件位于:/Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java 版 OpenJDK 运行时环境(内部版本 1.8.0_152-release-915-b08)

[✓] iOS 工具链 - 为 iOS 设备开发 (Xcode 8.3.2)
• Xcode 位于 /Applications/Xcode.app/Contents/Developer
• Xcode 8.3.2,内部版本 8E2002
• ios 部署 1.9.2
• CocoaPods 版本 1.3.1

[✓] Android Studio(3.0版)
• Android Studio 位于 /Applications/Android Studio.app/Contents
• Java 版 OpenJDK 运行时环境(内部版本 1.8.0_152-release-915-b08)

[✓] 连接设备
• 为 x86 构建的 Android SDK • emulator-5554 • android-x86 • Android 5.1.1 (API 22)(模拟器)
• iPhone SE • 795AA980-157D-455C-AC52-385CBDDC3BDE • ios • iOS 10.3(模拟器)
```

最有用的评论

我是新手,非常感谢! 干得好! @mchome
qq 20171101164118

Widget _setupBody() {
    return new Column(
      children: <Widget>[
        new Expanded(
          child: new ListView.builder(
            itemBuilder: (_nothing, int index) => _messageList[index],
            reverse: true,
            itemCount: _messageList.length,
          ),
        ),
        new Divider(height: 1.0),
        new Material(
          color: Theme.of(context).cardColor,
          //child: new Container(
          //  padding: const EdgeInsets.symmetric(horizontal: 5.0),
            child: new Row(
              children: <Widget>[
                new Flexible(
                  child: new TextField(
                    maxLines: 1,
                    controller: _myController,
                    onSubmitted: _handleSubmitt,
                    onChanged: (String text) {
                      setState(() {
                        _isComposing = text.length > 0;
                      });
                    },
                    decoration: new InputDecoration.collapsed(hintText: "input here"),
                  ),
                ),
                new IconTheme(
                    data: new IconThemeData(color: Theme.of(context).accentColor),
                    child: Theme.of(context).platform == TargetPlatform.iOS
                        ? new CupertinoButton(child: new Text("Send"), onPressed: _isComposing ? () => _handleSubmitt(_myController.text) : null)
                        : new IconButton(icon: new Icon(Icons.send), onPressed: _isComposing ? () => _handleSubmitt(_myController.text) : null))
              ],
            ),
         //   decoration: new BoxDecoration(
         //     color: Theme.of(context).cardColor,
         //   ),
         // ),
        ),
      ],
    );
  }

所有3条评论

@cjztool ,如果你只想给它Material类而不是使用Container类。

我是新手,非常感谢! 干得好! @mchome
qq 20171101164118

Widget _setupBody() {
    return new Column(
      children: <Widget>[
        new Expanded(
          child: new ListView.builder(
            itemBuilder: (_nothing, int index) => _messageList[index],
            reverse: true,
            itemCount: _messageList.length,
          ),
        ),
        new Divider(height: 1.0),
        new Material(
          color: Theme.of(context).cardColor,
          //child: new Container(
          //  padding: const EdgeInsets.symmetric(horizontal: 5.0),
            child: new Row(
              children: <Widget>[
                new Flexible(
                  child: new TextField(
                    maxLines: 1,
                    controller: _myController,
                    onSubmitted: _handleSubmitt,
                    onChanged: (String text) {
                      setState(() {
                        _isComposing = text.length > 0;
                      });
                    },
                    decoration: new InputDecoration.collapsed(hintText: "input here"),
                  ),
                ),
                new IconTheme(
                    data: new IconThemeData(color: Theme.of(context).accentColor),
                    child: Theme.of(context).platform == TargetPlatform.iOS
                        ? new CupertinoButton(child: new Text("Send"), onPressed: _isComposing ? () => _handleSubmitt(_myController.text) : null)
                        : new IconButton(icon: new Icon(Icons.send), onPressed: _isComposing ? () => _handleSubmitt(_myController.text) : null))
              ],
            ),
         //   decoration: new BoxDecoration(
         //     color: Theme.of(context).cardColor,
         //   ),
         // ),
        ),
      ],
    );
  }

@mchome 厉害了 哈哈! 才发现你主页用的汉字..

此页面是否有帮助?
0 / 5 - 0 等级