button - 如何使用 python 在 dash 的 app.layout 中使用循环创建多个按钮？

Question

我有一个列表，我想为列表中的每个元素创建按钮。

我正在尝试通过在 app.layout 中使用 for 循环一次性创建按钮，但这似乎不起作用。请帮我解决这个问题。代码是

import os
import openpyxl 
from openpyxl.chart import BarChart3D,Reference
import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output , State
import time
import dash_table
from collections import deque
import plotly.graph_objs as go
import random

owner_list = ['apple','banana','jack','grapes','pear']

external_css = ["https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"]
external_js = ['https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js']
app = dash.Dash('export-data',
                external_scripts=external_js,
                external_stylesheets=external_css
                )
colors = {
    'text': '#0000A0'
}
app.layout = html.Div([
    html.Div(children=[
    html.H1(children='TASKS_COMPLETION',
            style={
            'textAlign': 'center',
            'color': colors['text']
                  })
                     ]),


     for every_owner in owner_list:
         html.Button(every_owner, id=every_owner)

    ], className="container",style={'width':'98%','margin-left':5,'margin-right':5,'max-width':50000})


if __name__ == '__main__':
    app.run_server(port=4050)

app.layout 中使用的 for 循环不起作用。

Answer 1

请创建一个按钮列表，在app.layout之外.

稍后，将这个新创建的列表分配给 child ，如 html.Div(children=<list>) .

这为我解决了问题。

import os
import openpyxl 
from openpyxl.chart import BarChart3D,Reference
import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output , State
import time
import dash_table
from collections import deque
import plotly.graph_objs as go
import random

owner_list = ['apple','banana','jack','grapes','pear']

external_css = ["https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"]
external_js = ['https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js']
app = dash.Dash('export-data',
                external_scripts=external_js,
                external_stylesheets=external_css
                )
colors = {
    'text': '#0000A0'
}

lst=[]
for every_owner in owner_list:
    lst.append(html.Button(every_owner, id=every_owner))

app.layout=html.Div(
    html.Div(lst)
    )

# app.layout = html.Div(
#     children=[
#     html.Div(
#         children=[
#             html.H1(
#                 children='TASKS_COMPLETION',
#                 style={
#                     'textAlign': 'center',
#                     'color': colors['text']
#                   },
#                 html.Div(
#                     children=lst
#                     )
#                 )
#             ]
#         )
#     ],
#     className="container",
#     style={'width':'98%','margin-left':5,'margin-right':5,'max-width':50000}
#     )


if __name__ == '__main__':
    app.run_server(port=4050)   

试图修改您的代码。它有一些对齐问题，因为创建的按钮隐藏在 H1 标签后面。所以我把它藏起来并产生了这样的结果。希望这能回答您的问题。