Flutter列表视图生成器灵活配置

z9smfwbn  于 2022-12-05  发布在  Flutter
关注(0)|答案(1)|浏览(151)

我已经开始自学Flutter dart语言。我已经建立了一个列表视图构建器部件,我想在应用程序中多次使用它。列表视图由一个复选框、中间的文本和尾部的信息按钮组成。现在我想配置我的列表视图,这样按信息图标就可以单独显示图片。例如,如果我按“木材”上的信息按钮,就会显示木材的图片。但如果我按“铁”上的按钮应该展示一张铁的图片等等......我期待着你的回答。
这就是我目前所尝试的,代码本身是工作的,除了我上面描述的问题。

`class ToDo extends StatelessWidget {

final List products = ['wood', 'iron' ];

ToDo({super.key});

@OverRide
Widget build(BuildContext context) {
return Scaffold(

body:
ListView.builder(
  itemCount: products.length,
  itemBuilder: (context, i) {
    return ToDoItem( products[i] );
  },
)
);
}
}

class ToDoItem extends StatefulWidget {
final String title;
const ToDoItem(this.title, {super.key});

@OverRide
State createState() => _ToDoItemState();
}

class _ToDoItemState extends State {
@OverRide
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 5,vertical: 2),
child: ListTile(
tileColor: const Color(0xFF5D6D7E),
shape: RoundedRectangleBorder(
side: const BorderSide (color:Colors.white,width: 2),
borderRadius: BorderRadius.circular(10),
),

contentPadding: const EdgeInsets.symmetric(vertical: 10.0),
leading: Checkbox(
  value: timeDilation !=1.0,
  onChanged: (bool? value) {
    setState(() {
      timeDilation = value! ? 3.0 : 1.0;
    });
  },

),
  title: Text(
  widget.title,
  style: const TextStyle(
      fontSize: 25.0,
      fontWeight: FontWeight.w600,
      color: Colors.white),
   ),
   trailing: IconButton(icon: const Icon(Icons.info_outlined,size: 40,color: Colors.orange,), 
   onPressed: () { print('Test1'); },),
  ),
 );
}
}

`

kfgdxczn

kfgdxczn1#

您可以按照以下步骤操作:
1.创建包含名为“wood.jpg”和“iron.jpg”的图像的资源文件夹
1.调用ToDoItem()小部件时,可以将Container中的图像渲染为:

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage(
          'assets/${widget.title}'),
      fit: BoxFit.fill,
    )
  ),
)
I hope this helps :)
Let me know if you come across any errors.

相关问题