flutter 自定义样式输入框

最新推荐文章于 2024-09-03 10:05:12 发布

WoSNBBcsdn

最新推荐文章于 2024-09-03 10:05:12 发布

阅读量947

点赞数

分类专栏： flutter 文章标签： dart flutter 前端

本文链接：https://blog.csdn.net/wosnbbcsdn/article/details/107124496

版权

本文通过示例代码展示了如何在Flutter中自定义输入框的样式，包括预览效果，帮助开发者实现个性化UI设计。

摘要由CSDN通过智能技术生成

代码

import 'package:flutter/material.dart';
class InputBoxContainer extends StatefulWidget {
  InputBoxContainer({Key key, this.onChange, this.icon}) : super(key: key);

  final onChange;
  final IconData icon;

  @override
  State<StatefulWidget> createState() {
    return InputBoxContainerBuilder();
  }
}

class InputBoxContainerBuilder extends State<InputBoxContainer> {
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(left: 10.0, right: 10.0, top: 2.0, bottom: 2.0),
      margin: EdgeInsets.only(bottom: 30.0),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(100.0),
          border: Border.all(
              width: 1.0,
              style: BorderStyle.solid,
              color: Color.fromRGBO(0, 0, 0, 0.1))),
      child: TextField(
        onChanged: widget.onChange,
        decoration: InputDecoration(
            border: InputBorder.none,
            icon: widget.icon != null ? Icon(widget.icon) : null),
      ),
    );
  }
}