Question

在我的应用程序中，我设置了一个IconButton来渲染具有彩色背景的行。不幸的是，按下按钮时的波纹动画会在“行”下渲染（如屏幕录像所示）。如何使涟漪显示在行上方？

driver.find_element_by_name("sub_activate").click().is_enabled()

Answer 1

波纹是Material效果的一部分。用IconButton将Material包裹起来：

Material(
  color: _bgColor,
  child: IconButton(
    padding: EdgeInsets.only(right: 16),
    icon: Icon(Icons.play_arrow, color: Colors.white, size: 48),
    tooltip: 'Start ${issue.issueName}',
    onPressed: () {},
  ),
),

更新

要更具体地实现目标，可以将Container替换为Material。

return Material(
  color: _bgColor,
  borderRadius: BorderRadius.all(Radius.circular(10.0)),
  child: Container(
     margin: EdgeInsets.only(top: 12, left: 18, right: 18),
     padding: EdgeInsets.only(top: 8, bottom: 8),
     backgroundBlendMode: BlendMode.multiply,
     child: Row(
     ...
  ),
);

Answer 2

您可以将Row包裹在InkWell内，这会给您带来触动的波纹。

我删除了容器的背景色，发现波纹的问题，并将文本颜色更改为黑色。

    @override
  Widget build(BuildContext context) {
    return Container(
        height: 100,
        margin: EdgeInsets.only(top: 12, left: 18, right: 18),
        padding: EdgeInsets.only(top: 8, bottom: 8),
        decoration: new BoxDecoration(
          color: Colors.transparent,
          border: new Border.all(color: Colors.orange),
          borderRadius: BorderRadius.all(Radius.circular(10.0)),
        ),
        child: InkWell(
          // added here
          onTap: () {},
          child: Row(children: [
            IconButton(
              padding: EdgeInsets.only(right: 16),
              icon: Icon(Icons.play_arrow, color: Colors.black, size: 48),
              tooltip: 'Start issue',
              onPressed: () {},
            ),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    padding: const EdgeInsets.only(bottom: 8),
                    child: Text(
                      'issue.title',
                      style: TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.bold,
                      ),
                      softWrap: true,
                    ),
                  ),
                  Text(
                    'issue.issueName',
                    style: TextStyle(
                      color: Colors.black,
                    ),
                  ),
                ],
              ),
            ),
          ]),
        ));
  }

参考

Add ripples

Answer 3

纹波始终位于材质小部件的顶部。因此，如果材质小部件上方有任何内容，您将在小部件下方看到涟漪。

只需用一个Material部件包装您的IconButton，并将其材料设置为使用“透明”类型，它就可以工作。

您可以使用下面的通用小部件向您的小部件添加波纹。

        def run(self):
            response = requests.get(self.url)
            #print(response.text)

            soup = BeautifulSoup(response.text, 'html.parser')

            def sql_insertion(url_data_list):

          #This basically adds row in my localdb

            def url_finder(url):
                if '&' in url:
                    return (url[:url.find('&')])
                elif '?' in url:
                    return (url[:url.find('?')])
                else:
                    return url

            def url_finder2(url):
                if '%' in url:
                    return (url[:url.find('%')])
                else:
                    return url

            final_urls= []
            userlist = []
            values = []
            data_list= [] #list for urls

            # loop for getting list of urls
            for i in soup.find_all("a",href=re.compile("(?<=/url\?q=)(htt.*://.*)")):
                u = re.split(":(?=http)",i["href"].replace("/url?q=",""))
                url_final = url_finder(u[0])
                url_f = url_finder2(url_final)
                values.append(url_f)
            final_urls = list(set(values))
            # printing and checking for wrong urls
            for i in final_urls:
                try:
                    article = NewsPlease.from_url(i)
                    if article.text == None:
                        self.sentiment = 0
                    else:
                        blob = TextBlob(article.text)
                        self.sentiment= blob.sentiment.polarity
                        self.subjectivity= blob.sentiment.subjectivity
                        if self.sentiment > 0:
                            polarity_level = 'Positive'
                        else:
                            polarity_level = 'Negetive' 
                    # instead of this just make a function for updating db row 
                    #if self.term.lower() in article.text.lower():
                    now = datetime.datetime.now()
                    insertion_date = now.strftime("%Y-%m-%d")
                    new_data = (self.client_id, self.term, article.url, article.title, article.text, insertion_date, article.date_publish.strftime("%Y-%m-%d"), polarity_level,self.sentiment, self.subjectivity,article.image_url)
                    data_list.append(new_data)
                except:
                    pass
            answer = sql_insertion(data_list)
            if answer>0:
                return 1
            else:
                return 0

您还可以在InkWell小部件的构造函数和用户'splashColor'属性中采用颜色来设置初始颜色。

Answer 4

它看起来像Flutter Framework中的错误。仅使用IconButton会发生这种情况，而FlatButton则没有问题。

可能的解决方法是将BlendMode设置为乘以 BlendMode.multiply 。
试试这个：

Container(
          decoration: BoxDecoration(
              color: Colors.greenAccent[400],
              backgroundBlendMode: BlendMode.multiply),
          child: ListTile(
            leading: IconButton(icon: Icon(Icons.play_arrow), onPressed: () {}),
            title: Text("issue title"),
            subtitle: Text("description"),
          ),
        ),

更新
在github

上发布

为什么Flutter IconButton动画显示在行下

4 个答案: