Flutter: boxdecoration은 아이콘 버튼의 잔물결을 숨깁니다. 렌더링 순서가 맞습니까?

에 만든 2017년 10월 25일 · 3코멘트 · 출처: flutter/flutter

번식 단계

https://codelabs.developers.google.com/codelabs/flutter/index.html#5 페이지 팔로우

내 코드는 다음과 같습니다

```
위젯 _setupBody() {
새 열 반환(
어린이들:[
새로운 확장(
자식: 새로운 ListView.builder(
itemBuilder: (_nothing, int 인덱스) => _messageList[인덱스],
반전: 사실,
itemCount: _messageList.length,
),
),
새로운 디바이더(높이: 1.0),
새 컨테이너(
패딩: const EdgeInsets.symmetric(수평: 5.0),
//장식: 새로운 BoxDecoration(color: Theme.of(context).cardColor,),
자식: 새 행(
어린이들:[
새로운 유연한(
자식: 새로운 TextField(
최대 라인: 1,
컨트롤러: _myController,
onSubmitted: _handleSubmitted,
장식: 새로운 InputDecoration.collapsed(hintText: "여기에 입력"),
),
),
새로운 아이콘테마(
데이터: 새로운 IconThemeData(색상: Theme.of(context).accentColor),
자식: new IconButton(icon: new Icon(Icons.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 16E195, 로케일 zh-Hans-CN, 채널 알파)
• Flutter의 /Users/cjz/ALL_IN_THIS/flutter
• 프레임워크 개정판 e8aa40eddd(7일 전), 2017-10-17 15:42:40 -0700
• 엔진 개정판 7c4142808c
• 도구 다트 버전 1.25.0-dev.11.0

[✓] Android 툴체인 - Android 기기용 개발(Android SDK 26.0.2)
• /Users/cjz/ALL_IN_THIS/Android/sdk의 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)
• /Applications/Xcode.app/Contents/Developer의 Xcode
• Xcode 8.3.2, 빌드 버전 8E2002
• ios 배포 1.9.2
• CocoaPods 버전 1.3.1

[✓] 안드로이드 스튜디오(버전 3.0)
• /Applications/Android Studio.app/Contents의 Android 스튜디오
• 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(시뮬레이터)
```

출처

cjztool

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

cjztool 에 2017년 11월 01일

👍6

모든 3 댓글

@cjztool , 그냥 색칠하고 싶다면 Container 클래스를 사용하는 대신 Material 클래스로 래핑할 수 있습니다.

mchome 에 2017년 11월 01일

👍2

저는 초보자입니다, 정말 감사합니다! 잘 했어! @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,
         //   ),
         // ),
        ),
      ],
    );
  }

cjztool 에 2017년 11월 01일

👍6

@MChome은 놀라운 하하입니다! 방금 홈페이지에 사용 된 한자를 발견했습니다.

cjztool 에 2017년 11월 01일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Flutter: boxdecoration은 아이콘 버튼의 잔물결을 숨깁니다. 렌더링 순서가 맞습니까?

번식 단계

가장 유용한 댓글

모든 3 댓글

관련 문제